使用响应式应用的引导程序列出行中的元素

Question

我有一个带有列表的导航栏。列表中的项目必须在任何设备上对齐。 在我的代码中，列表的项目仅适用于大分辨率，但对于移动设备，它们是一个在另一个之下。 我怎样才能排队？ 我正在使用 md bootstrap 来使其响应。

  <div class="row">

    <div class="col-sm-12">

      <nav class="navbar navbar-expand-md navbar-light">

        <ul>

          <li> my profile </li>

          <li> home </li>

        </ul>

      </nav>

    </div>

 </div>

Answer 1

试试这样：&nbsp;<div class="row">&nbsp; &nbsp; <div class="col-sm-12">&nbsp; &nbsp; &nbsp; <nav class="navbar navbar-expand-md navbar-light">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="d-md-flex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li> my profile </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li> home </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div>&nbsp;</div>

Answer 2

您也可以像这样，使用引导内置的类来创建列：&nbsp; <nav class="navbar navbar-expand-md navbar-light">&nbsp; &nbsp; <ul class="row">&nbsp; &nbsp; &nbsp; <li class="col-md-3"> my profile </li>&nbsp; &nbsp; &nbsp; <li class="col-md-3"> home </li>&nbsp; &nbsp; </ul>&nbsp; </nav>