Question

我正在尝试创建一个导航栏。我已经在网站正文中使用了引导程序，并且希望导航栏跨越相同的宽度。但是，我希望边框能跨过整个宽度。这样，“主页，学习，进度等”元素似乎就在实际页面中所有内容的正上方，但没有使边框被截断。

    <div class="navbar container">
    <div class="navbar-left">
        {% url 'quizapp-home' as url %}
        <a href='{{ url }}' {% if request.path|slice:":6" == url %} id="current" {% endif %}><i class="fas fa-home"></i> Home</a>
        {% url 'quizapp-learn' as url %}
        <a href='{{ url }}' {% if request.path|slice:":7" == url %} id="current" {% endif %}><i class="fas fa-pencil-ruler"></i> Learn</a>
        {% url 'progress' as url %}
        <a href='{{ url }}' {% if request.path|slice:":10" == url %} id="current" {% endif %}><i class="fas fa-chart-line"></i> Progress</a>
    </div>
    <div class='navbar-right'>
        {% if user.is_authenticated %}
            {% url 'profile' as url %}
            <a href='{{ url }}' {% if request.path|slice:":9" == url %} id="current" {% endif %}> Profile</a>
            {% url 'logout' as url %}
            <a href='{{ url }}' {% if request.path|slice:":8" == url %} id="current" {% endif %}>Logout</a>
        {% else %}
            {% url 'login' as url %}
            <a href='{{ url }}' {% if request.path|slice:":7" == url %} id="current" {% endif %}>Login</a>
        {% endif %}
    </div>
</div>


.navbar {
  background-color: #ffffff;
  overflow: hidden;
  font-family: "Century Gothic", Century, sans-serif;
  font-weight: bold;
  list-style-type: none;
  border-bottom: 2px solid #ccc;
  /* box-shadow: 2px 2px 10px grey; */
}

.navbar a {
  float: left;
  color: #cccccc; /* light grey */
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 22px;
  transition: all 0.3s ease; /* Add transition for hover effects */
}

.navbar a:hover {
  color: #737373; /* dark grey */
}

.active {
  color: #34a7e0; /* blue */
}

#current {
  color: #34a7e0; /* blue */
}

.navbar-left a {
  margin-left: 10px;
  margin-right: 20px;
}

.navbar-right a {
  margin-right: 10px;
  float: left;
  font-size: 18px;
}

Answer 1

只需将.navbar的内容包装到.container中即可：

<nav class="navbar">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <!-- Your regular navbar content here, aligned with the page contents... -->
  </div>
</nav>

已记录here。无需自定义CSS。

工作示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<body>
  <nav id="navbar-example2" class="navbar navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#fat">@fat</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#mdo">@mdo</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#one">one</a>
            <a class="dropdown-item" href="#two">two</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#three">three</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <main>
    <div class="container">
      <h1>Hello, world!</h1>
    </div>
  </main>
</body>

Answer 2

尝试一下：

.navbar {
    width: 100%;
}

如何使CSS边框跨越页面的整个长度，但元素保留在容器中？

2 个答案: