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

Html 引导V4 alpha-如何在不接触css的情况下集中对齐导航项目,html,css,twitter-bootstrap,drop-down-menu,Html,Css,Twitter Bootstrap,Drop Down Menu,我有一个导航栏在左边,有几个下拉菜单。我想让文本在下拉列表中居中对齐,或者在导航栏中更好地表示下拉列表。怎么做?(如果可能,无需修改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">

我有一个导航栏在左边,有几个下拉菜单。我想让文本在下拉列表中居中对齐,或者在导航栏中更好地表示下拉列表。怎么做?(如果可能,无需修改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>

  • 下拉标题
  • 下拉标题
  • 下拉标题
  • 下拉标题

我不知道你说的“中心对齐”是什么意思。您可以使用文本中心水平对齐文本

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