Столбцы сетки начальной загрузки не работают должным образом

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 не отображается в классе и отображается внизу этой строки. Однако его следует разместить слева в div с классом col-3.

Так что здесь не так? Как я могу решить эту проблему?

Answer 1

Вы должны использовать col-xs-1 col-xs-7 col-xs-3в вашем классе (вместо col-7) или любого размера и отображайте то, что хотите.