响应式显示 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>

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

    <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>

    <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>

    <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>

  </div>

</nav>

通过上面的代码，它在所有屏幕尺寸上的列大小为 33.33%(col-4)，并且数据 1º、2º、3º 将在同一行上对齐。

您可以在 Bootstrap 中了解行和列（网格系统）。或者，如果您只想继续使用HTML和CSS ，那么请在 css 中学习float{}以使其以这种方式对齐。另一种方法是为每个元素设置设置宽度并使其浮动，但是当您向元素提供更多内容时它看起来很尴尬。因此，最好的方法是使用引导程序学习并继续您的项目。

Answer 2

这是在一行中添加正确数量的列的问题。

你应该检查网格系统

https://getbootstrap.com/docs/4.0/layout/grid/

<nav>

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

        <div class="row">

           <div class="col-4">

            <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>

           </div>

           <div class="col-4">

            <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>

           </div>

           <div class="col-4">

            <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>

        </div>

    </div>  

</nav>