Fatal编程技术网
  • html/
  • Html 中心引导列

Html 中心引导列

html css twitter-bootstrap twitter-bootstrap-3

Html 中心引导列,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我试图将我的列放在bootstrap的中心，这样它们就可以均匀分布。我已将每列设置为col-lg-4，因此每行最多有3列。因此，如果有5列，则行应如下所示： col1 col2 col3 col4 col5 col1 col2 col3 col4 col1 col2 col1 col2 col3 col4 col5 col1 col2

我试图将我的列放在bootstrap的中心，这样它们就可以均匀分布。我已将每列设置为col-lg-4，因此每行最多有3列。因此，如果有5列，则行应如下所示：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
如果有4列，则应如下所示：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
如果为2，则应如下所示：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
我希望这是有道理的。我已将封闭行设置为 
显示：表格
并将每列

{ 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: auto 0;
}
但由于某些原因，这些列不居中，并且是左对齐的。有人能帮忙吗？请参阅插入的代码

.bd居中{
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：自动0；
}

JS-Bin
70%
10%
10%
10%
20%
这是您想要的 输出：

如果有4列，则应如下所示：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

.bd居中{文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边距：自动0；}

JS-Bin
$（文档）.ready（函数（）{
变量元素=$（“分类列-lg-4”）。长度；
开关（元素%3）{
案例1：
$（“.table div:nth child（“+elem+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-12 col-md-12 col-sm-12 col-xs-12'）；
打破
案例2：
$（“.table div:nth child（“+elem+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-6 col-md-6 col-sm-6 col-xs-6'）；
$（“.table div:nth child（“+（elem-1）+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-6 col-md-6 col-sm-6 col-xs-6'）；
打破
违约：
打破
}
});
70%
10%
10%
10%
20%
这是您想要的 输出：

如果有4列，则应如下所示：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

.bd居中{文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边距：自动0；}

JS-Bin
$（文档）.ready（函数（）{
变量元素=$（“分类列-lg-4”）。长度；
开关（元素%3）{
案例1：
$（“.table div:nth child（“+elem+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-12 col-md-12 col-sm-12 col-xs-12'）；
打破
案例2：
$（“.table div:nth child（“+elem+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-6 col-md-6 col-sm-6 col-xs-6'）；
$（“.table div:nth child（“+（elem-1）+”）.removeClass（'col-lg-4 col-md-4 col-sm-4 col-xs-4'）.addClass（'col-lg-6 col-md-6 col-sm-6 col-xs-6'）；
打破
违约：
打破
}
});
70%
10%
10%
10%
20%
我怀疑您没有完全理解引导网格系统。。。 每一行有12个单位宽，你可以根据自己的选择把它们分开。例如，在“5列布局”中，实际上要做两行：第一行中的每列宽4个单位，第二行中的每列宽6个单位

对于5列布局，可以执行以下操作：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
...
...
...
对于4列布局：

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
...
...
对于2列布局：

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
我怀疑您没有完全理解引导网格系统。。。 每一行有12个单位宽，你可以根据自己的选择把它们分开。例如，在“5列布局”中，实际上要做两行：第一行中的每列宽4个单位，第二行中的每列宽6个单位

对于5列布局，可以执行以下操作：

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

     col1      col2  

col1      col2     col3
     col4      col5

col1      col2     col3
          col4 

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
...
...
...
对于4列布局：

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
...
...
对于2列布局：

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

。。。
...
我相信这是正确的方法，同时不改变或覆盖任何引导类。我相信这是正确的方法，同时不改变或覆盖任何引导类。只是一个想法。您可以使用javascript根据您拥有的div数量动态更改引导类。当然，除非你不想使用javascript。（您的标签建议）顺便说一句，class=“col-xs-4”与class=“col-lg-4 col-md-4 col-sm-4 col-xs-4”的作用完全相同。@user1038814：检查我的答案，因为我相信它能满足您的需要。只是想一想。您可以使用javascript根据您拥有的div数量动态更改引导类。当然，除非你不想使用javascript。（您的标签建议）顺便说一句，class=“col-xs-4”与class=“col-lg-4 col-md-4 col-sm-4 col-xs-4”完全相同。@user1038814：检查我的答案，因为我相信它符合您的要求。