Bootstrap:在同一行上有中心块和右块

时间:2017-03-07 07:59:51

标签: twitter-bootstrap twitter-bootstrap-4

我从来没有真正掌握过Bootstrap,但现在我真的需要它而且我在搜索之后无法让它按照我想要的方式工作。

我需要的很简单。两个div是一个以屏幕为中心,一个在最右边。对于居中的div,我让它与中心块一起工作,但之后的所有内容都放在一个新的线上。代码:

<div className="row">
  <div className="center-block col-md-4" style={{ float: 'none' }}>Logo</div>
  <div className="col-md-4">Some links</div>
</div>

如果我用三个div和col-md-4绘制整行,我会得到同一行,但我真的想避免只有一个空div。

但是,如果我使用最后一种方法,我仍然遇到了div最右边的问题。我能得到的最好的方法是将text-xs-right应用于正确的div,但它仍然不足以满足我的需要。代码:

<div className="row">
  <div className="col-md-4" />
  <div className="col-md-4">Logo</div>
  <div className="col-md-4 text-xs-right">Some links</div>
</div>

我希望它看起来如何:

_______________________________
|          Logo          Links |
|                              |
|                              |
|                              |
|______________________________|

编辑:在bootply中尝试后,我发现它可能是我的设置有问题,因为它看起来就像我想要的那样。

编辑2:看起来我正在使用bootstrap 4,这就是为什么它不起作用。遗憾!

编辑3:我正在使用jsx,因此我需要className。它与普通HTML中的类一样。

4 个答案:

答案 0 :(得分:0)

将className更改为class

<div class="row">
<div class="container">
    <div class="col-md-6">
        Logo Here
    </div>
    <div class="col-md-6 pull-right">

    </div>
</div>

答案 1 :(得分:0)

<div class="row">
    <div class="col-md-4 col-md-offset-4">Logo</div>
    <div class="col-md-2 col-md-offset-2">Some links</div>
</div>

答案 2 :(得分:0)

这可以在Bootstrap 4中使用。不要忘记使用class=而不是className=

 <div class="row">
      <div class="col-md-4 offset-md-4 text-center">Logo</div>
      <div class="col-md-4 text-right">Some links</div>
 </div>

http://www.codeply.com/go/8gGRrwsyiL

答案 3 :(得分:-1)

<div class="row">
  <div class="col-md-8 text-center">Logo</div>
  <div class="col-md-4 text-right">Some links</div>
</div>