Question

我有一个关于Bootstrap网格布局和空div的问题。

我有文字和按钮，我希望文本和按钮显示在页面的中间（水平）。我用空div来实现这一点。

有没有更好的方法来做到这一点。我不希望我的文本正确对齐，因为文本将分为两行。

最好的方法是什么？人们只是使用空div？

提前致谢

<div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <span>
                This is a new feature 
                </br> for the site.
            </span>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a class="btn btn-default size" href="">Click button</a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
    </div>

Answer 1

如果您不使用文本对齐中心。您可以使用bootstrap类col-md-offset-3

Answer 2

如果您想将所有内容集中在行中，只需将text-center添加到您的行中，然后将您的div放在class="col-xs-12"内。

<div class="row text-center">
  <div class="col-xs-12">
    <span>
      This is a new feature for the site.
    </span>
  </div>
  <div class="col-xs-12">
    <a class="btn btn-default size" href="">Click button</a>
  </div>
</div>

JSFiddle

Answer 3

将text-center类用于包含文本和按钮的div。

<强>更新我已经快速搜索并找到相关帖子。我建议在询问之前进行搜索，因为你的问题可能会被投票和/或搁置。

Answer 4

如此简单的事情 - https://jsfiddle.net/8cuyc32z/1/？

<强> HTML

<div class="text-center">
  <div class="tc-text">
    This is a new feature <br />for the site.
  </div>
  <div class="tc-btn">
    <a class="btn btn-default size" href="">Click button</a>
  </div>
</div>

<强> CSS

.tc-text, .tc-btn {
  display:inline-block;
  vertical-align:middle;
  margin:0 10px;
}

希望有所帮助！

Answer 5

Tricky12描述的方法是将列中的所有内容集中在一起，那就是你想要做的事情？如果是这样，方法是正确的。

Bootstrap网格布局。空div

5 个答案: