居中li col md-5

Question

有没有什么优雅的方法来使一组.col-md-5居中？

我有一个ul，在ul中，我有一个li的列表，这些li在两列中堆叠在一起。我需要将这个ul放在中心位置，但是我想出的所有东西要么不工作，要么很难看。

我的代码如下。

​

<div class="container">
                
                    <ul class="row">
                    
                    
                    <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li><li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li><li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
    </ul>
    </div>

​

下面是一个例子。

https://www.bootply.com/HBsEFFrrGw

Answer 1

您可以只在行上使用justify-content-center类

<div class="container">

  <ul class="row justify-content-center">
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>




  </ul>
</div>


<div id="push"></div>

Updated Bootply

Answer 2

使用.col-md-6，用warp div填充来替换页边距，并修改css

li > div{
 border:1px solid lightgray;
 padding:1em
}

示例https://www.bootply.com/S1vwo3AfdO

Answer 3

你可以做一个nth-child()选择器，就像这样；

@media (min-width: 768px) {
  li.col-md-5:nth-child(odd) {
    margin-left: 8.333333%; // set to whatever you need to center them
  }
}

或者将justify-content-center类添加到行中，并让bootstrap处理其余部分-请注意，这也会使最后一项居中，这可能不是预期的结果