屏幕尺寸较小时的 HTML 标题行

Question

美好的一天，我试图在我网站的界面方面保持一致。现在，如果我将屏幕尺寸调整为较小的尺寸，我正试图让标题中的列表变成行。如果我在一个 div 类行中放置多个链接，我将无法弄清楚如何将其放入行中。感谢我能得到的任何帮助。

HTML:

<div class="bg-color-white strong">
      <div class="container">
        <nav>
          <div class="row spacer">
            <div class="col-md-1">
              <div class="logo">
                <a href="home/../"><img src="img/logo_png_solo.png"></a>
              </div>
            </div>

            <div class="col-md-8">
              <ul class="list1">
                <li><a href="main" style="font-size: 26px;">Home</a></li>
                <li><a href="faq" style="font-size: 26px;">FAQ</a></li>
                <li><a href="contact" style="font-size: 26px;">Contact</a></li>
              </ul>
            </div>

            <div class="col-md-3">

                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="../signout" class="small color-orange">Sign Out</a>
                <hr>

              <ul class="list2">
                  <li><a href="cards" class="ul_login" style="font-size: 26px;">Login</a></li>
                  <li><a href="cards/register.php" class="ul_reg" style="font-size: 26px;">Register</a></li>
              </ul>
            </div>

          </div>
        </nav>
      </div>

编辑:如果屏幕尺寸较小，我想要的是让所有链接自动排成一行，如果我添加 lg、md、sm，我的三个链接仍然排成一行。

JS fiddle :https://jsfiddle.net/61kc2hjx/

Answer 1

<div class="row">
    <div class="col col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"></div>
</div>

默认情况下，.col div 将具有全宽。但是随着屏幕变大，col 宽度会逐渐减小。 JSFiddle

编辑#1:

<div class="col-12 col-md-8">
    <div class="list1 row">
        <a class="col col-4 col-md-12">Home</a>
        <a class="col col-4 col-md-12">FAQ</a>
        <a class="col col-4 col-md-12">Contact</a>
    </div>
</div>

JSFiddle
这是我从您的解释中了解到的。但我希望你明白这一点。