bootstrap动态定位列

我有一个水平条，我想把部分放到那个条中。我想不出一种方法来动态调整它们 - 也就是说，如果我有1个部分放到中间，如果我有2个部分，它们将放置在中间，如果我有3个部分，则中间部分居中，另外两个是在任何一方，等我改变了JavaScript的部分数量，所以我不能解决这个问题的特定数量的部分。bootstrap动态定位列

我该怎么做？此外，我意识到部分名称并未显示在代码片段中（但它们位于我的实际网站上）。

.middle-section { 
 
    height: 100px; 
 
    
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #F6F7F8; 
 
    border-radius: 5px; 
 
    transform: translate(0%,-50%); 
 
    
 
    -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
-moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class = 'container-fluid'> 
 
<div class = 'middle-section'> 
 
    <div class = 'row'> 
 
<div class ='col-md-2'> 
 
    Section 
 
</div> 
 
<div class ='col-md-2'> 
 
    
 
    Section 
 
</div> 
 
     
 
    </div> 
 
    
 
    </div> 
 
    </div>

来源

2016-07-15 nachime

为什么不使用BS网格系统？ – Yuri

我不是已经？ – nachime

不，你正在尝试使用你自己的'.middle-section'类，而你应该使用BS类，比如'pull- *'，'col-md-offset- *'，'.col-md-pull- * '，'.col-md-push- *' – Yuri

我用Flexbox的解决你的问题，只需添加一些div来试试吧：

JSfiddle

你可以选择来证明所有的div：center，space-around或space-beween

.middle-section { 
 
    height: 100px; 
 
    
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #F6F7F8; 
 
    border-radius: 5px; 
 
    
 
    -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
-moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
    
 
} 
 

 
.customrow {display:flex; flex-wrap:wrap;justify-content:space-around; } 
 

 
.customrow-child {border:1px solid black;}

<div class = 'container-fluid'> 
 
    <div class = 'middle-section'> 
 
    <div class = 'row customrow'> 
 
     <div class ='col-md-2 row-child customrow-child'> 
 
     Section 
 
     </div> 
 
     <div class ='col-md-2 row-child customrow-child'> 
 
    
 
     Section 
 
     </div> 
 
     
 
     </div> 
 
    
 
    </div> 
 
    </div>

来源

2016-07-15 09:15:18 Relisora

谢谢你。我真的需要学习如何使用flexbox（我现在正在这样做）。任何想法垂直居中？我试着只做padding-top：在子行上使用50px，但由于我使用父元素之一进行了转换，因此它并没有将其居中对齐。除非我错了，这不是为什么它没有正确对中哈哈。 – nachime

您可以使用'flex-direction：column'让您的孩子垂直对齐。如果您正在尝试学习Flex框，请告诉您两个非常好的网站：[CSS技巧]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）以获取完整的指南和[Flexy Boxes]（http://the-echoplex.net/flexyboxes/）是一个可以尝试一切的沙箱。 – Relisora

谢谢！我现在在那个网站上：D – nachime

您可以通过添加偏移这样做，

这仅仅是一个非侵犯引导解决方案。但是，当然有很多解决这个问题的方法。但这是引导默认类的快速解决方案。

HTML，

<div class="container-fluid"> 
    <div class="row middle-section"> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">Section</div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Section</div> 
    </div> 
</div>

CSS，

.middle-section { 
    height: 50px; 
    width: 800px; 
    margin: 0 auto; 
    background-color: #F6F7F8; 
    border-radius: 5px; 

    -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
    -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
    box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
}

见例如：https://jsfiddle.net/ywdwnq2s/2/

您可以找到引导文档中更多的细节，http://getbootstrap.com/css/#grid-responsive-resets

为了让更多的动态，你可以覆盖默认值点点加入一些额外的造型，

HTML，

<div class="container-fluid"> 
    <div class="row middle-section"> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section</div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section</div> 
    </div> 
</div>

CSS，

.middle-section { 
    height: 50px; 
    width: 800px; 
    margin: 0 auto; 
    background-color: #F6F7F8; 
    border-radius: 5px; 
    text-align: center; 

    -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
    -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
    box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
} 

.inner-section { 
    text-align: center; 
    float: none; 
    display: inline-block; 
}

见例如：https://jsfiddle.net/ywdwnq2s/4/

来源

2016-07-15 09:33:25

投票答复的人请解释你的投票。将有助于学习。谢谢！ –

只需Text-align:center

.middle-section { 
 
    height: 100px; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #F6F7F8; 
 
    
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
    box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75); 
 
} 
 
.middle-section .row{ 
 
    text-align:center; 
 
    } 
 
.middle-section .row .col-md-2{ 
 
    display:inline-block; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class = 'container-fluid'> 
 
<div class = 'middle-section'> 
 
    <div class = 'row'> 
 
<div class ='col-md-2'> 
 
    Section 
 
</div> 
 
    <div class ='col-md-2'> 
 
    Section 
 
</div> 
 
    <div class ='col-md-2'> 
 
    Section 
 
</div> 
 
<div class ='col-md-2'> 
 
    Section 
 
</div> 
 
</div> 
 
    
 
</div> 
 
</div>

小提琴：https://jsfiddle.net/sank8893/osz13nd8/1/

来源

2016-07-15 09:49:10 Sankar

bootstrap动态定位列

回答

相关问题