我从来没有真正掌握过 Bootstrap 的窍门,但现在我真的需要它,我四处寻找后我无法让它按照我想要的方式工作。
我需要的很简单。两个div,一个在屏幕中央,一个在最右边。对于居中的 div,我让它与 center-block 一起工作,但是之后的所有内容都放在一个新行上。代码:
<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:看起来我正在使用引导程序 4,这就是它不起作用的原因。对不起!
编辑 3:我使用 jsx,因此我需要 className。它与普通 HTML 中的类相同。
这适用于 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句