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

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

试试这样：

 <div class="row">

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

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

        <ul class="d-md-flex">

          <li> my profile </li>

          <li> home </li>

        </ul>

      </nav>

    </div>

 </div>

Answer 2

您也可以像这样，使用引导内置的类来创建列：

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

    <ul class="row">

      <li class="col-md-3"> my profile </li>

      <li class="col-md-3"> home </li>

    </ul>

  </nav>