Как увеличить ширину навигационной панели до полной ширины? - PullRequest
0 голосов
/ 02 февраля 2020

enter image description here. Я хочу увеличить его ширину. Это код навигационной панели html и css. Ошибка увеличения ширины навигационной панели. В этом коде навигационной панели он не работает должным образом, я просто хочу увеличить его ширину, чтобы он был заполнен. Изображение приведено ниже. Пожалуйста, помогите и спасибо.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container d-flex align-items-center px-4">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="oi oi-menu"></span> Menu
      </button>
      <form action="#" class="searchform order-lg-last">
      <div class="form-group d-flex">
        <input type="text" class="form-control pl-3" placeholder="Search">
        <button type="submit" placeholder="" class="form-control search"><span class="ion-ios-search"></span></button>
      </div>
    </form>
      <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a href="index.html" class="nav-link pl-0"  style="text-align: center;">Home</a></li>
            <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
            <li class="nav-item"><a href="courses.html" class="nav-link">Courses</a></li>
            <li class="nav-item"><a href="teacher.html" class="nav-link">Staff</a></li>
          <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
<!-- END nav -->   

CSS часть

@media (min-width: 1200px) {
   nav .container {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}
}

@media (min-width: 992px) {
 .navbar-expand-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 1200;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.navbar-expand-lg .navbar-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute; }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem; }
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap; }
.navbar-expand-lg .navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto; }
.navbar-expand-lg .navbar-toggler {
  display: none; } }

1 Ответ

0 голосов
/ 02 февраля 2020

вы можете установить значение ширины на 100% в файле CSS.

вы также можете использовать bootstrap, чтобы добиться этого, у нас есть container и container-fluid в bootstrap первый резервирует поля слева и справа от выбранного элемента div (или чего-либо еще), а второй оборачивает для этого всю ширину. У нас также есть класс row в bootstrap, который вы можете использовать вместе с container

, вы можете узнать больше о bootstrap и его Grid здесь:

https://getbootstrap.com/docs/4.0/layout/grid/

...