Bootstrap 3上的输入宽度

您想做的当然是可以实现的。

您想要的是将每个“组”包装成一行，而不是将整个表格仅包装成一行。这里：

<div >    <h1>My form</h1>    <p>How to make these input fields small and retain the layout.</p>    <form role="form">        <div > <div >     <label for="pre">Name</label>     <input type="text"  /> </div>        </div>        <div > <div >     <label for="pre">Email</label>     <input type="text"  /> </div>        </div>        <div > <button type="submit" >Submit</button>        </div>    </form></div>

请注意，在新的小提琴中，我还添加了’col-xs-5’，因此您也可以在较小的屏幕中看到它-
删除它们没有什么区别。但是请记住，在您的原始类中，您仅使用’col-lg-1’。这意味着，如果屏幕宽度小于“
lg”媒体查询大小，则使用默认的块行为。基本上，仅通过应用“ col-lg-1”，您采用的逻辑是：

IF SCREEN WIDTH < 'lg' (1200px by default)   USE DEFAULT BLOCK BEHAVIOUR (width=100%)ELSE   APPLY 'col-lg-1' (~95px)

有关更多信息，请参见Bootstrap3网格系统。我希望我很清楚，否则让我知道，我会详细说明。