时间戳

首页 > 解决方案 > How to have CSS border span the length of the page but have elements remain inside container?

html - How to have CSS border span the length of the page but have elements remain inside container?

问题描述

I am trying to create a navigation bar. I have used bootstrap for the body of my site and would like the navigation bar to span the same width. However, I want the border to span the full width; so that the elements 'Home, Learn, Progress, etc' appear to be right above the things in the actual page but not so that the border is cut off. navbar not in container navbar in container

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

标签： htmlcssdjangotwitter-bootstrap

解决方案

只需将内容包装.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>

记录在这里。无需自定义 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>

推荐阅读