自举网格布局。空div

我有一个关于Bootstrap网格布局和空div的问题。自举网格布局。空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>

来源

2016-03-01 Kong

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

来源

2016-03-01 18:36:22

联合文本中心，我相信这是正确的答案。在http://getbootstrap.com/css/#grid-offsetting中了解更多信息 – teefars

我使用了col-md-offset，它效果很好。谢谢 – Kong

使用text-center类包含文本和按钮的股利。

更新： 我已经做了一个快速搜索，并找到相关的职位。我建议在提问前进行搜索，因为您的问题可能会被拒绝投票和/或搁置。

来源

2016-03-01 18:29:24 Kody

如果要居中的行中的所有内容，只是简单地添加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

来源

2016-03-01 18:36:04 Tricky12

怎么样这样简单 - 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; 
}

希望帮助！

来源

2016-03-01 18:39:32

Tricky12描述的方式是将列中的所有内容居中放在你想要做的是什么？如果这样的话是正确的。

来源

2016-03-01 18:59:57

自举网格布局。空div

回答

相关问题