Question

是否有任何优雅的方式来集中.col-md-5组？

我有一个ul并且在ul中我有一个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填充替换margin 并修改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处理其余的 - 请注意这将使最后一项居中，这可能不是理想的结果

中心li col-md-5

3 个答案: