Bootstrap 3：在宽度不固定的 3 列布局中水平居中列内容

Question

我正在尝试将导航栏（实际上我没有使用 bootstrap 类作为导航栏）置于宽度不固定的三列布局中。我已经尝试了我为此找到的几乎所有方法，其中 none 对我有用（也很确定，也许我做错了什么）。

这是HTML：

  <div class="submenu-categories">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-2 col-md-2"><span><a href="#">76 products</a></span></div>
        <nav class="col-lg-8 col-md-8">
          <ul>
            <li><a href="#">standard</a></li>
            <li><a href="#">premium</a></li>
            <li><a href="#">super premium</a></li>
            <li><a href="#">ultra premium</a></li>
            <li><a href="#">corporate</a></li>
          </ul>
        </nav>  
        <div class="col-lg-2 col-md-2"><span><a href="#">show all wines</a></span></div>
      </div>  
    </div>  
  </div>

这是 SCSS：

ul {
   list-style-type: none;
   margin: 0!important;
   padding: 0;
}

nav {
    ul {
        margin:0;
        li {
            @media only screen and (min-width:768px) {
                float:left;
            }

            text-transform: uppercase;
            a {
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.submenu-categories {
    background-color: #1c1c1c;
    display: none;
    height:5.9375em;
    line-height:5.9375em;
    opacity: 0.9;
    padding: 0;
    text-align: center;

    @media only screen and (min-width:768px) {
        display: block;
    }

    .ctn {
        @media only screen and (min-width:1285px) {
            padding:0 15em 0 7em;
        }   
    }       

    nav {
        border: 1px solid red;
        ul {

            li {
                &.with-border {
                    a {
                        border-right:1px solid white;
                        padding-right:2em;
                    }
                }                   

                a {
        color: white;
                    font-size: .75em;
                    font-weight: 600;
                    margin: 0 .5em 0 .5em;
                    text-transform: uppercase;

                    @media only screen and (min-width:830px) {  
                        margin: 0 1.875em 0 1.875em;
                    }

                    &:hover {
                        border-bottom: 3px solid red;
                    }
                }
            }
        }
    }

    span {

        display: inline-block;

        a {
            color: #979797;
            font-size: .75em;
            font-weight: 600;
            text-transform: uppercase;              

            &:hover {
                text-decoration: underline !important;
            }
        }
    }       
}

这是密码： http://codepen.io/anon/pen/wzvGmY

我需要将菜单居中放置在中间列中，但如果不给导航栏上的 UL 一个固定宽度我就无法做到这一点，有没有什么方法可以使该元素居中而不必给定一个固定宽度UL ?

Answer 1

这就是你想要的吗？ http://codepen.io/panchroma/pen/ambkky

我所做的更改是

nav {
 ul {
  text-align:center; /* new */
   li {
     @media only screen and (min-width:768px) {
      //float:left; /* new */
      display:inline-block; /* new */
    }
...
}

Answer 2

您可以使用 css FlexBox 来完成。从 li 中删除 float 并添加以下 css 以使其生效。

nav ul {
  justify-content: center;
  align-item: center;
  display: flex;
}

这里是 Working Example.

Bootstrap 3：在宽度不固定的 3 列布局中水平居中列内容

Bootstrap 3: center column content horizontally on a 3 column layout with not fixed width

css

centering

twitter-bootstrap