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小提琴：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的全角宽度。但是随着屏幕变大，列宽将逐渐减小。 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
这是我从您的解释中所了解的。但我希望你能明白。

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

1 个答案:

编辑＃1：