Bootstrap 网格列似乎无法正常工作
Bootstrap grid columns does not seem to be working properly
我正在使用 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
class 中,而是出现在该行的下方。但是它应该放在 div 和 col-3
的 class 的左侧。
那么这里出了什么问题?我该如何解决这个问题?
您应该在 class 中使用 col-xs-1
col-xs-7
col-xs-3
(而不是 col-7
)或任何尺寸并显示您想要的内容。
我正在使用 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
class 中,而是出现在该行的下方。但是它应该放在 div 和 col-3
的 class 的左侧。
那么这里出了什么问题?我该如何解决这个问题?
您应该在 class 中使用 col-xs-1
col-xs-7
col-xs-3
(而不是 col-7
)或任何尺寸并显示您想要的内容。