Question

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

enter image description here

  <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？

这段代码是我正在尝试实现的正确方法，还是有更好的方法，这是正确的引导规则..我是新手的引导程序，我感到内疚，我不遵守规则。

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-->

在上述评论中回答您的问题：

是否有必要将每行中的col-md- *加起来为12？

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

关于抵消的说明：
如果您使用的是col-*-offset-*，请确保col s 和 offset的总和不超过12行。

关于网格的Bootstrap混淆

1 个答案: