Question

即使我不是新程序员，Html和Css问题对我来说也无法解决。简单的阅读文档/规范似乎还不够，因为每个示例都带有一个新的标记和类早午餐来演示其中之一的用法。我的代码基于Bootsrap官方演示和文档，但未能完成此简单任务：导航栏和导航药丸不在同一行。

使用以下代码，我尝试实现一个简单的导航栏标题，其中品牌位于左侧，菜单项位于右侧。
菜单项由文字和下面的圆圈中的照片组成。

<div class="container">
    <div class="header">
        <nav>
            <a class="navbar-brand justify-content-start" href="#"><h1>Foo Bar</h1></a>
            <ul class="nav nav-pills justify-content-end">
                <li class="justify-content-end" role="presentation">
                    <a href="#t0">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="justify-content-end" role="presentation">
                    <a href="#t1">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t2">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t3">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t4">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t5">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>


</div>

预期输出应为：

Answer 1

将类别添加到导航d-flex justify-content-between

<div class="container">
    <div class="header">
        <nav class="d-flex justify-content-between">
            <a class="navbar-brand" href="#"><h1>Foo Bar</h1></a>
            <ul class="nav nav-pills">
                <li class="justify-content-end" role="presentation">
                    <a href="#t0">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="justify-content-end" role="presentation">
                    <a href="#t1">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t2">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t3">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t4">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
                <li class="" role="presentation">
                    <a href="#t5">
                        <div class="nav-item">
                            <h3>John Doe</h3>
                            <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>


</div>

https://jsfiddle.net/lalji1051/9sce3urb/4/

Answer 2

请尝试使用下面的代码段，并使用flex正确对齐元素。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="header navbar navbar-expand flex-column flex-md-row bd-navbar">

      <a class="navbar-brand justify-content-start" href="#">
        <h1>Foo Bar</h1>
      </a>
      <ul class="navbar-nav flex-row ml-md-auto nav nav-pills">
        <li class="justify-content-end" role="presentation">
          <a href="#t0">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
        <li class="justify-content-end" role="presentation">
          <a href="#t1">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
        <li class="" role="presentation">
          <a href="#t2">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
        <li class="" role="presentation">
          <a href="#t3">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
        <li class="" role="presentation">
          <a href="#t4">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
        <li class="" role="presentation">
          <a href="#t5">
            <div class="nav-item">
              <h3>John Doe</h3>
              <img src="https://via.placeholder.com/100/" alt="John" class="img-circle">
            </div>
          </a>
        </li>
      </ul>

    </div>
  </div>


  </div>
</body>

导航品牌和导航药不在同一行

2 个答案: