Question

我的.container的固定宽度为960px。我使用了col-lg-#但是当我将页面调整为小于1200px的宽度时，该div跨越整个宽度。有什么方法我不需要包括col-sm-＃和col-md-＃？

.container{
    width:960px;
    border:2px solid red;
    height:700px;
    margin:0 auto;
} 
<div class="container">
        <form role="form">
            <div class="col-lg-3">
                <input type="email" class="form-control" id="email" placeholder="email" />
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>

Answer 1

使用col-xs-＃代替col-lg - ＃

<div class="container">
       <form role="form">
           <div class="form-group">
               <div class="col-xs-4">
                   <input type="text" class="form-control" />
               </div>
           </div>
       </form>
    </div>

有效!!

Answer 2

您似乎从根本上误解了col类的工作原理。简而言之，是的，您必须在lg以下声明所需的col类，如果它们不是col - * - 12的默认值。在这种情况下，你应该做

<div class="col-xs-3">

而不是col-lg-3。

Bootstrap网格类适用于所有声明的设备宽度及以上 ...因此col-xs-3适用于xs，sm，md，和lg。 Col-md-3适用于md和lg，但xs和sm默认为12.在您的示例col-lg-3中，仅适用于{ {1}}，一旦窗口缩小到lg阈值（1200px）以下，它就会默认为col-12。

这可能是一个难以解释的概念，但一旦你得到它就会非常有意义。

不想使用col-sm-＃（（> = 1200px）

2 个答案: