响应式显示 Bootstrap

Question

我是 Laravel 的新手，我有一个项目，我希望在手机上显示“导航”，就像在电脑或笔记本上一样。

我的笔记本：

1º 2º 3º 

我的手机：

1º

2º

3º

我的前代码：

<nav>

  <div class="nav nav-tabs" id="nav-tab" role="tablist">

    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">1º</a>

    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">2º</a>

    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">3º</a>

  </div>

</nav>

<div class="tab-content" id="nav-tabContent">

  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">ex:1º</div>

  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">ex:2º</div>

  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ex:3º</div>

</div>

Answer 1

<nav>&nbsp; <div class="nav nav-tabs row" id="nav-tab" role="tablist">&nbsp; &nbsp; <a class="nav-item nav-link active col-4" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">1º</a>&nbsp; &nbsp; <a class="nav-item nav-link col-4" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">2º</a>&nbsp; &nbsp; <a class="nav-item nav-link col-4" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">3º</a>&nbsp; </div></nav>通过上面的代码，它在所有屏幕尺寸上的列大小为 33.33%(col-4)，并且数据 1º、2º、3º 将在同一行上对齐。您可以在 Bootstrap 中了解行和列（网格系统）。或者，如果您只想继续使用HTML和CSS&nbsp;，那么请在 css 中学习float{}以使其以这种方式对齐。另一种方法是为每个元素设置设置宽度并使其浮动，但是当您向元素提供更多内容时它看起来很尴尬。因此，最好的方法是使用引导程序学习并继续您的项目。

Answer 2

这是在一行中添加正确数量的列的问题。你应该检查网格系统https://getbootstrap.com/docs/4.0/layout/grid/<nav>&nbsp; &nbsp; <div class="nav nav-tabs" id="nav-tab" role="tablist">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">1º</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">2º</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">3º</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;&nbsp;</nav>