Bootstrap 网格列似乎无法正常工作

Question

我正在使用 Bootstrap 3，并为我的网页设置了以下网格布局：

<div class="container">
    <div class="header">
         <div class="top-nav">
              <div class="row">
                   <div class="col-1">
                        <img src="https://sitename.com/logo.jpg">
                   </div>
                   <div class="col-7 mid-nav">
                        <!-- Search box & Navbar comes here -->
                   </div>
                   <div class="col-1" style="margin-top:30px !important;">
                        <a href="#"><i class="fa fa-shopping-cart fa-4x sabad-kharid"></i></a>
                   </div>
                   <div class="col-3">
                        <form method="POST" action="">
                           <div class="form-group">
                               <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                           </div>
                           <div class="form-group">
                               <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                           </div>
                           <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                  </div>
             </div>
         </div>
     </div>
</div>

结果如下所示：

结果如图所示：

您可以看到，Bootstrap表单未出现在col-3类别中，而是出现在该行下面。然而，它应该放置在具有col-3类别的div的左侧。

那么出了什么问题呢？我该如何解决这个问题？

- memite7760

Answer 1

你应该在你的类中使用 col-xs-1 col-xs-7 col-xs-3 （而不是col-7），或者任何大小并显示你想要的内容。

- Muhammad Habibpour

---

很好。在使用 col-xs-7 时，是否有必要同时包括 col-md-7 和 col-lg-7？ - memite7760

不，如果你使用 xs 那就是指 xs 大小及更大的尺寸！因此，这种样式适用于 md 尺寸、lg 尺寸等等。 - Muhammad Habibpour

如果你设置了class="col-xs-1 col-md-5"，请小心。这意味着xs=1，sm=1，md=5，lg=5。 - Muhammad Habibpour