您想做的当然是可以实现的。
您想要的是将每个“组”包装成一行，而不是将整个表格仅包装成一行。这里：
<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网格系统。我希望我很清楚，否则让我知道，我会详细说明。
