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

国家

我从来没有真正掌握过 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>

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

块定义必须具有由“{”和“}”分隔的块内容,与块头在同一行开始

块定义必须具有由“{”和“}”分隔的块内容,与块头在同一行开始

使用CSS和HTML在同一块中用一行分隔文本

Bootstrap3在同一行上有两个下拉菜单

显示带有流体设计的内联块不对齐同一行

为什么这些块元素在同一行上?

同一行中的两个文本块

CSS内联块元素不在同一行

同一行上有多个RelativeSizeSpan

为什么类型在do块的下一行而不是在同一行匹配?

同一块硬盘上有多个独立的读/写头?

Python:exec()代码块和eval()最后一行

如何居中对齐正被推到下一行的Zurb Foundation块网格元素?

将“块前缀”添加到属于文件同一块的所有行

如何从 terraform 中同一块中的前一行引用变量?

如何使导航块和右块固定,又如何使整个容器居中?

在同一行和同一容器中居中对齐元素

sed在块后追加一行

内联语句块(最后一行)

如何通过中间在同一行上设置两个块?

内联块容器中同一行文本上的SVG img

在同一行上左右对齐两个内联块

CSS在同一行上添加两个块

如果/ for / func块的开括号位置必须在同一行上,该走吗?

CSS:为什么此内联块div不显示在同一行上?

PowerShell是否要求脚本块的左花括号在同一行上?

车手-将匿名功能块参数与函数调用保持在同一行

两个内联块元素始终在同一行上

联系表格7-同一行上有多个文本字段