html - Bootstrap V4 alpha - 如何在不接触 css 的情况下集中对齐导航项

Question

我在左侧有一个导航栏，其中有几个下拉菜单。我想让文本在下拉菜单中居中对齐，或者在导航栏中更好地表示下拉菜单。怎么做？ (如果可能的话不修改css)

我当前的代码片段 -

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">

          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a>
            </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Region</a>
                  <div class="dropdown-menu">
                      <h6 class="dropdown-header">Dropdown header</h6>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                  </div>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
                  <div class="dropdown-menu">
                      <h6 class="dropdown-header">Dropdown header</h6>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                  </div>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Brand</a>
                  <div class="dropdown-menu">
                      <h6 class="dropdown-header">Dropdown header</h6>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                  </div>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Packaging</a>
                  <div class="dropdown-menu">
                      <h6 class="dropdown-header">Dropdown header</h6>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                  </div>
              </li>

            <!--<li class="nav-item">-->
              <!--<a class="nav-link" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Analytics</a>-->
            <!--</li>-->
          </ul>

        </nav>

Answer 1

我不确定您所说的“居中对齐”是什么意思。您可以只使用 text-center 水平对齐文本。

<ul class="nav nav-pills flex-column text-center">
</ul>

http://www.codeply.com/go/J8C7RwDIDW