Bootstrap: 居中块和右块在同一行

Question

我从来没有真正掌握 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，因此我需要 class名称。就和普通HTML中的class一样。

Answer 1

将class名称更改为class

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

    </div>
</div>

Answer 2

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

Answer 3

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

Answer 4

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

Bootstrap: 居中块和右块在同一行

Bootstrap: Have centered block and right block on same row

twitter-bootstrap

twitter-bootstrap-4