css - 嵌套 Bootstrap 行

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 提供固定高度。

谢谢， 马迪斯

Answer 1

您使用的是哪个版本的 Bootstrap？我不确定第 3 版是否有 row-fluid 类。

但是，如果 row-fluid 适合你，试试这个:

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