Question

我想这可能是不可能的，但也许任何专家都可以帮助我解决这个问题。我试图让一个非常简单的反复行为起作用：

两列布局，徽标左侧，导航栏右侧。现在，导航栏应该在第二列的底部对齐用于更大的屏幕，在较小的屏幕上浮动到徽标正下方的下一行。

更大的屏幕：

屏幕较小：

我认为到目前为止这只能用JS完成，但也许有人知道用纯CSS实现这一点的方法。

HTML：

<div class="container">
    <div class="row">
        <div id="col1" class="col-xs-12 col-sm-3">
            <div id="logo">Logo</div>
        </div>

        <div id="col2" class="col-xs-12 col-sm-9">
            <div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
        </div>
    </div>
</div>

CSS：

#logo {
    background-color: red; height: 100px; width: 150px; color: white;
}
#navbar {
    background-color: blue; height: 30px; width: 100%; color: white;
}

我已经设置了一个包含完整代码的jsfiddle：http://jsfiddle.net/m4s4uqhx/6/

非常感谢任何帮助。

Answer 1

将col-2的高度设置为与徽标类似，并将导航栏设置为绝对位置和底部0。用这个解决方案替换你的css

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#col1 {
  //border: 1px solid darkred; padding: 0px; 
}
#col2 {
  //border: 1px solid darkblue; padding: 0px;
}
#logo {
  background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
  background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}

@media only screen and (max-width : 992px){
 #navbar{
       position: absolute;
      bottom: 0px;
 }
 #col2{
   height: 100px;
 }
}

@media only screen and (max-width : 768px){
 #navbar{
       position: relative;
 }
 #col2{
   height: auto;
 }
}

Answer 2

如果你的元素的大小是固定，就像在你的例子中一样，你可以用padding-top来做，并在屏幕太小时将其删除（xs: <768px ）。

@media(min-width: 768px) {
  #col2 {
    padding-top:70px;
  }
}

<强> Demo on JSFiddle

否则，我想你必须写一些JavaScript：）

Answer 3

如果您知道徽标的确切高度，那么您可以使用媒体查询在较大的屏幕上为＃col2 div添加填充顶部

平板电脑和更大的@media（最小宽度：778px）{...}

桌面和更大的@media（最小宽度：992px）{...}

大屏幕@media（最小宽度：1140px）{...}

Css示例

@media(min-width:992px){
  #col2{padding-top:70px;}
}

工作示例 http://www.bootply.com/SHj7pkKt80

Answer 4

这里的问题是列的高度不相等。 CSS仅提供了几个用于均衡columsn高度的选项。 CSS表和Flexbox。

你可以将花车留在原位，但 flexbox 会在一定程度上覆盖浮动。

尽管如此，根据您的要求，影响可能很小。

Codepen Demo

#logo {
  background-color: red;
  height: 100px;
  width: 150px;
  color: white;
}
#navbar {
  background-color: blue;
  height: 30px;
  width: 100%;
  color: white;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
#col2 {
  display: flex;
  align-items: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div id="col1" class="col-xs-12 col-sm-3">
      <div id="logo">Logo</div>
    </div>

    <div id="col2" class="col-xs-12 col-sm-9">
      <div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
    </div>
  </div>
</div>

底部对齐的div而不禁用Bootstrap列浮动

4 个答案: