Bootply example

Question

我想制作一个我的徽标位于左侧的布局，我的标题和菜单位于徽标的右侧。当屏幕太小时，它应该是徽标，标题，然后菜单。（两边都有一个col-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

我不确定你到底想要什么，但你的课程似乎有很多冗余。您应该了解的关于Bootstrap的一件事是，如果列数发生变化，您只需要指定每个大小的列数。例如，如果你想让一个div在小，中，大上占据2列，你只需要定义小，每个大小以上的小将自动使用相同数量的列。同样，您不需要指定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>

这将从小到大的同一行显示徽标，标题和菜单，它将显示移动（xs）上堆叠的徽标，标题和菜单。

Bootstrap3行跨度

1 个答案:

Bootply example