css - 如何使用 Twitter Bootstrap 连接第一列中的两行（或模拟该效果）

Question

我正在尝试设计一个导航栏，例如：

如果它是一张桌子，它会是这样的：

但到目前为止，我所有的尝试都失败了。也许，我最好的尝试是：

<div class="pull-right">
<g:img dir="images" file="logo2.gif"/>
</div>

<div class="row-fluid">
<div class="logo pull-left">
    <g:img dir="images" file="logo.gif"/>
</div>

<nav class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
        ...
        </div>
    </div>
</nav>

产生：

Answer 1

这是一个演示：http ://codepen.io/anon/pen/nCoyB

您可以创建单行并相应地设置 div 的样式，或者，如果您坚持使用 Bootstrap 行，请使用高度和边距。

这个解决方案是后者。Logo-1请注意和之间有一个间隙nav；这是因为 BS 的.spanx课程有利润。你可以骑过它。

<div class="row-fluid">
  <div class="span3">
    <div class="logo-1">Logo 1</div>
  </div>

  <div class="span9">
    <div class="row-fluid">
      <div class="span12">
        <div class="logo-2 pull-right">Logo 2</div>
      </div>
      <div class="span12">
        <nav class="nav">Nav</div>
      </div>      
    </div>
  </div>
</div>


.logo-1 {
  border: 1px solid #ccc;
  height: 70px;
  margin: 30px 0;
  padding: 10px;  
}

.logo-2 {
  border: 1px solid #ccc;
  height: 65px;
  margin: 0 0 10px;
}

nav {
  border: 1px solid #ccc;
  height: 40px;
  width: 100%;
}