html - Bootstrap 控件根据屏幕宽度更改位置高度

Question

我有一个包含标题标签和链接标签的 Bootstrap 行。当屏幕宽度小于 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

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

<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>