Bootstrap控件根据屏幕宽度改变位置高度

Question

我有一个包含标头标签和链接标签的引导行。当屏幕宽度小于768像素时，它们在同一行上对齐。当容器宽度为768或更大时，链接元素会向上移动几个像素。

以下是演示此行为的示例：https://jsfiddle.net/bz3399x8/

<div class="row">
  <div class="col-sm-12">
    <a class="btn btn-primary" href="#" style="width: 80px; float: right;">
      <i class="icon-plus">
        Add
      </i>
    </a>
    <h1>
      Hello World
    </h1> 
  </div>
</div>

以下是演示此行为的屏幕截图。

有两个问题：

1. 造成这种情况的原因是什么？
2. 我该如何解决这个问题？

Answer 1

根据Bootstrap Docs的语法错误，

• 需要.container来换.row

和

• h1和a按钮元素需要包含在Bootstrap列中。 因此，在这种情况下，您可以使用.col-sm-10 + .col-sm-2。

为演示添加.col-xs

＆＃13;

＆＃13;

.row {
  /* demo*/
  background:red
}
.btn  {
  margin-top:20px /* choose as it fit you better */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-10 col-sm-10">
      <h1>
      Hello World
    </h1>
    </div>
    <div class="col-xs-2 col-sm-2">
      <a class="btn btn-primary" href="#">
        <i class="icon-plus">
        Add
      </i>
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

虽然在不同列中包装元素有助于解决您的问题。如果您要将两个元素包装在单个列中，则需要指定要内联的元素。自h1元素和a元素以来出现问题，即使在引导程序的同一行中也显示为block和inline-block。

将display: inline-block添加到h1元素，并将顶部填充添加到a元素。这也应该回答它。

在display: inline上使用h1进行尝试，看看行为的差异。 inline元素不支持垂直边距。

小提琴：https://jsfiddle.net/dk_dragonknight/m8ey6mba/