在引导程序（Alpha）中无法使li元素居中

Question

我正在将我的菜单构建为左侧边栏，我希望将内容置于col-md-3之内。因为我正在使用Bootstrap 4，所以我使用text-xs-center类。它与h1标题工作正常，但菜单点显示在右侧。

图像：

这是我的HTML：

<nav class="col-sm-3  ">
<div class="container-fluid">

    <h1 class="Logostyle text-xs-center">HelloLogo</h1>

    <div class="row">
        <ul class="text-xs-center" routerLinkActive="active ">
            <li class="text-xs-center list-inline"><a class="nav-link" routerLink="/home">Home</a></li>
            <li class="nav-item list-inline"><a class="nav-link text-xs-center " routerLink="/services">Services</a></li>
            <li class="nav-item list-inline"><a class="nav-link text-xs-center " routerLink="/journal">Journal</a></li>
        </ul>
    </div>
  </div>
 </nav>
 <router-outlet></router-outlet>       

Answer 1

我以为你想要这个：

由于您使用的是let pattern = new RegExp('^\/wiki\/'); doSelect("Location").siblings('td').find('a').each(function(i, el) { var result = $(this).attr('href').replace(pattern, ''); console.log(result); }); ，.col，然后是.container-fluid，然后是h1，并且.row位于其中。

ul有一点保证金和填充，因此您的上下文框与使用.row框的h1略有不同。 （通过添加.container-fluid来查看框，您可以轻松查看框的方式。 ）div { border: red solid 3px; }默认情况下具有浏览器用户代理样式，它将使用ul向右推送。因此，为了防止它向右移动，您可以轻松删除-webkit-padding-start: 40px;和ul，然后使用样式代替li。我将在下面提供。

a

您还必须将其添加到样式表

中

<nav class="col-md-3">
    <div class="row">
        <div class="col-md-12">
            <h1 class="Logostyle text-xs-center">HelloLogo</h1>
        </div>
    </div>


    <div class="row"> 
        <div class="col-md-12 text-xs-center">
            <a class="nav-link" routerLink="/home">Home</a>
            <a class="nav-link" routerLink="/services">Services</a>
            <a class="nav-link" routerLink="/journal">Journal</a>
        </div>
    </div> 
</nav>

结果：