当前位置: 首页 > 知识库问答 >
问题:

将twitter引导程序中的列居中对齐[副本]

雷献
2023-03-14

我已经开始学习Bootstrap了。我的问题是如何中心对齐一个列水平,引导包含12列布局,没有中间数字。更清楚的是,如果是11列布局,中间的数字应该是6(左5列,中间1列,右5列)

共有3个答案

公孙国兴
2023-03-14

如果放不下1列,可以干脆在中间放2列……(我只是将答案组合在一起)用于引导程序3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

甚至,您还可以通过在样式中添加以下内容以文本为中心的列:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

此外,这里还有另一种解决方案

东方飞捷
2023-03-14

对于bootstrap 3,实现你想要的最好的方法是...用偏移量列。有关详细信息,请参阅以下示例:
http://getbootstrap.com/css/#grid-offsetting

简而言之,在没有看到您的div的情况下,这里有一个示例可以帮助您,不需要使用任何自定义类。请注意“col-6”是如何使用的,它的一半是3...所以“offset-3”是如何使用的。平均分割将允许您要获得的居中间距:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>
方光华
2023-03-14

这个问题在这里得到了正确的回答,使用Twitter Bootstrap 3在专栏中居中

对于奇数行:即col-md-7或col-large-9,使用此

将以列为中心添加到要居中的列中。

<div class="col-lg-11 col-centered">    

并将其添加到样式表中:

.col-centered{
float: none;
margin: 0 auto;
}

对于偶数行:即col-md-6或col-large-10使用此

只需使用bootstrap 3的offset col类。即,

<div class="col-lg-10 col-lg-offset-1">
 类似资料:
  • 我正在尝试将三个引导列居中对齐。我不希望列跨越整行。我认为这会使图像看起来太大,空间不够。这就是为什么我放了三列“col-md-3”。我喜欢这个尺寸的栏目。我只想让这些列居中对齐。我想我可以将类名“justify content md center”应用到行中,它可以工作,但不能工作。有人知道如何使用Bootstrap 3将下面的列居中对齐吗?可能吗? 这是我的密码: 在代码笔上查看它。 谢谢你的

  • 我有一个问题,在一个列的居中行。下面是我的html的样子: 我曾试图: 有什么其他的想法,如何或可能为什么我不能集中或保持回应?

  • 不知道如何将此按钮居中。在BS3中,我只使用中心块,但在BS4中,这不是一个选项。有什么建议吗?

  • 我正试图在页面中央对齐两幅有响应的图像。 我在用电脑。容器类,但仍然是向右的。

  • 我试图将导航栏项目水平居中对齐,但它们向左对齐。 有人能帮忙吗? 这是一个桌面问题-只是要明确,我有这个问题在桌面级别。 这是我目前的代码: 演示:https://jsfiddle.net/cjoasysz/