Как отобразить элементы по горизонтали, используя bootstrap v3.3.7? - PullRequest
Новая
       33

Как отобразить элементы по горизонтали, используя bootstrap v3.3.7?

0 голосов
/ 13 мая 2019

Я пытаюсь заставить элементы на панели навигации отображаться, и проблема в том, что они работают, хотя и вертикально.

Я пытался добавить код display:inline-block ко всем селекторам css navbar-nav, но безрезультатно. В конце я попытался изменить код «display: block» в селекторе «nav» на display:inline-block. 

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: inline-block;
}

.navbar-nav {
  margin: 7.5px -15px;
}

.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu>li>a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu>li>a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-nav .open .dropdown-menu>li>a:focus {
    background-image: none;
  }
}

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right~.navbar-right {
    margin-right: 0;
  }
}
<html>

<head>
  <title>This is a webpage!</title>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                    </button>
        <a class="navbar-brand topnav" href="#"></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="Login.html">Login</a>
          </li>
          <li>
            <a href="register.html">Sign Up</a>
          </li>
          <li>
            <a href="index5.html">Symptoms</a>
          </li>
          <li>
            <a href="index6.html">Insurances</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Ссылки «О программе», «Вход в систему», «Регистрация», «Симптомы» и «Страхование» должны располагаться горизонтально. Однако независимо от того, что я делаю, они располагаются только вертикально.

Ответы [ 3 ]

1 голос
/ 15 мая 2019 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          
        </li>
      </ul>
      
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

То же самое и с Bootstrap 3, правильное использование классов поможет вам получить желаемый результат.Посмотрите этот пример

0 голосов
/ 13 мая 2019

Прежде всего, если вы используете bootstrap 4, тогда вообще не нужно писать все это CSS, BS 4 дает вам отличные решения для таких вещей, только правильно используя некоторые классы.

Проверьте это

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      
      
      
      <li class="nav-item">
                          <a href="#about" class="nav-link">About</a>
                      </li>
                      <li class="nav-item">
                          <a href="Login.html" class="nav-link">Login</a>
                      </li>
                      <li class="nav-item">
                          <a href="register.html" class="nav-link">Sign Up</a>
                      </li>
                      <li class="nav-item">
                          <a href="index5.html" class="nav-link">Symptoms</a>
                      </li>
                      <li class="nav-item">
                          <a href="index6.html" class="nav-link">Insurances</a>
                      </li>
    </ul>
    
  </div>
</nav>

Просто используйте классы правильно, вы можете увидеть все эти опции классов в форме здесь .

0 голосов
/ 13 мая 2019

Попробуйте добавить следующий стиль: 

.navbar-nav > li {
    float: left;
}

Кроме того, вы можете добавить display: inline-block; к li элементам, в частности: 

.navbar-nav > li {
    display: inline-block;
}
...