html - 关于网格的 Bootstrap 混淆

Question

我正在尝试使用 bootstrap 将我的非响应式网站转换为响应式网站。我从顶部横幅开始。它是 1000 像素 * 400 像素。它在右上角有一个登录链接。在左边的下方有一个网站标题说(我的网站标题:标语)。在右边的下方是搜索。我能够实现它，但对如何实现感到困惑。我的网站是固定容器 1024px。

  <div class="container" style="max-width:1024;width:98%" >
      <div id="banner-holder" class="row"> 
         <div class="col-md-12">
            <div class="row">
                <div class="col-md-12 clearfix">
                   <p style="float:right;">Login links</p>
                </div>
            </div>
            <div class="row">
               <div class="col-md-12 clearfix">
                  <p style="float:left;">Site banner title</p>
               </div>
            </div>
            <div class="row">
                <div class="col-md-12 clearfix">
                   <p style="float:right;">search box</p>
                </div>
            </div> 
         </div>     
      </div><!-- row holding bannder ends here-->  
  </div><!--container ends here-->

我有几个疑问？比如在一行中直接给出三行是可以的还是应该 我像上面给出的那样给出中间 col-md-12？

这段代码是实现我想要实现的目标的正确方法还是有更好的方法？ bootstrap 规则.. 我是 bootstrap 的新手，我感到内疚，因为我没有遵守规则。

Answer 1

正如我在评论中提到的，您的嵌套是正确的，但可能是无关紧要的。

简化标记

<div class="container" style="max-width:1024;width:98%" >
    <div id="banner-holder" class="row"> 
        <div class="col-md-12">
            <div class="clearfix">
                <p class="pull-right">Login links</p>
            </div>
            <div class="clearfix">
                <p class="pull-left">Site banner title</p>
            </div>
            <div class="clearfix">
                <p class="pull-right">search box</p>
            </div> 
        </div>     
    </div><!-- row holding bannder ends here-->  
</div><!--container ends here-->

在上面的评论中回答你的问题:

is it necessary for col-md-* inside every row to add up to 12?

这几乎是正确的，col-md-* 的总和在一行内不超过 12，以便在中等设备分辨率下保持所需的列布局。

关于偏移量的注意事项:
如果您正在使用 col-*-offset-*，请确保 col 和 offset 的总和>s 在一行内不超过 12。