Question

我正在col-md-内测试嵌套的bootstrap行。我有以下代码：

<div class="container-fluid">
  <header class="row-fluid clearfix">
    <div class="col-md-1 logo">  
      <img src="images/logo.png" width="100%">
    </div>
    <div class="col-md-11 side">
      <div class="row-fluid">
        <div class="col-..
          <p>Test1</p>
        </div>
      </div>
      <div class="row-fluid">
        <div class=col-...
          <p>menu</p>
        </div>
      </div>
    </div>
  </header>
</div>

在上面的代码中，logo.png是一个高大的图像，我希望在logo.png所在的列旁边的列上有两行。在所述两行中，顶部的一行将具有小横幅，而较低的一行将具有导航栏。我想将顶部横幅与logo.png的上边缘对齐，导航栏与logo.png的下边缘对齐。

论坛上有人建议我可以实现这个结果吗？我不想为列或logo.png。

提供固定的高度

谢谢， Maadis

Answer 1

您使用的是哪个版本的Bootstrap？我不确定版本3上是否存在行流体类。

但是，如果行液适用于您，请尝试以下方法：

<div class="container-fluid">
 <header class="row-fluid">
   <div class="col-md-1 logo">  
     <img src="images/logo.png" width="100%">
   </div>
   <div class="col-md-11 side">
     <div class="row-fluid">
       <div class="col-md-12">
         <p>Test1</p>
       </div>
       <div class="col-md-12">
         <p>menu</p>
       </div>
     </div>
   </div>
 </header>
</div>

嵌套的引导行

1 个答案: