Bootstrap3行跨度

Question

我想做一个布局，我的标志在左边，我的标题和菜单在标志的右边。当屏幕太小，它应该是徽标，标题，然后菜单。(两边都有一辆车-lg-2)

我的尝试是：

<header class="row">
        <div id="logo"class="col-xs-12 col-sm-2 
                         col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">
        </div>
        <div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div id="title">
                Title
            </div>
            <nav id="navigation_bar" >
                Menu
            </nav>
        </div>      
    </header>
    <div class="row">       
        <div id="something" class="col-xs-12 col-sm-12
                  col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
            something
        </div>

header {
    background: #0090e5 !important;
}

#logo   {
    height:250px;
}
#title_menu {
  height:50px;
}

但是在IPhone上，标题和菜单消失了，似乎在下面行的元素后面。我使用的高度，因为我希望所有的东西是对齐的底部行。

Answer 1

我不知道你到底想要什么，但在你的课程中似乎有相当多的冗余。您应该了解的一件事是，如果列数正在变化，则只需指定每个大小上的列数。例如，如果您想让div在小、中和大的地方占据2列，您只需要定义small，上面的每个大小都会自动使用相同数量的列。类似地，您不需要指定col-xs-12，因为已经假定了这一点。因此，您可以将其简化为以下内容(请注意，我只定义了sm的列数，其他的都是自动处理的)：

<div class="container">
  <header class="row">
    <div id="logo" class="col-sm-2">
      <img src="http://placehold.it/50x50">
    </div>
    <div id="title_menu" class="col-sm-5">
      <div id="title">
        Title
      </div>
    </div>
    <div class="col-sm-5">
      <nav id="navigation_bar">
        <ul>
          <li><a href="#">Menu Item 1</a></li>
          <li><a href="#">Menu Item 2</a></li>
          <li><a href="#">Menu Item 3</a></li>
          <li><a href="#">Menu Item 4</a></li>
        </ul>
      </nav>
    </div>      
  </header>
</div>

这将显示标志，标题和菜单都在同一行从小up，它将显示标志，标题和菜单堆叠在移动(xs)。

启动实例