Элементы NavBar не появляются в одной строке, даже если я использую bootstrap для этого - PullRequest
Новая
       4

Элементы NavBar не появляются в одной строке, даже если я использую bootstrap для этого

0 голосов
/ 13 марта 2020 
 <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>OmniFood</title>
      <!--Google fonts-->
      <link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">

      <!--CSS Stylesheets-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <link rel="stylesheet" href="vendors/css/style.css">

      <!--Font Awesome-->
      <script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>

      <!--bootstrap scripts-->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    </head>

      <body>
        <section >
          <div class="container-fluid">
            <nav class="navbar">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link"href="#">FOOD DELIVERY</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">HOW IT WORKS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">OUR CITIES</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">SIGN UP</a>
                </li>
              </ul>
            </nav>
            </div>




      </body>
    </html>

так что мой код работает, но он не идет в одну строку, которая, как предполагается, должна состоять в том, чтобы мои навигационные элементы располагались справа в одной строке, но они идут построчно, я пытался сделать это в css используя встроенный блок отображения, но все еще не работает

Ответы [ 3 ]

0 голосов
/ 13 марта 2020

Он работает нормально, так как он отзывчив, поэтому я думаю, что вы используете небольшие устройства, поэтому его в блоке, если вам все еще нужно подряд добавить класс flex-row с navbar-nav

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>OmniFood</title>
      <!--Google fonts-->
      <link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">

      <!--CSS Stylesheets-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <link rel="stylesheet" href="vendors/css/style.css">

      <!--Font Awesome-->
      <script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>

      <!--bootstrap scripts-->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    </head>

      <body>
        <section >
          <div class="container-fluid">
            <nav class="navbar navbar-expand-lg">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link"href="#">FOOD DELIVERY</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">HOW IT WORKS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">OUR CITIES</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">SIGN UP</a>
                </li>
              </ul>
            </nav>
            </div>


</section >

      </body>
    </html>
0 голосов
/ 13 марта 2020

Добавить стиль для списка 'display: inline-block' и добавить CSS для '.navbar-nav {display: inline-block! Важный}'. надеюсь, это поможет вам. 

.navbar-nav{display:inline-block !important;}
li.nav-item {
    display: inline-block;
}
      <link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">

      <!--CSS Stylesheets-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <link rel="stylesheet" href="vendors/css/style.css">

      <!--Font Awesome-->
      <script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>

      <!--bootstrap scripts-->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      
          <div class="container-fluid">
            <nav class="navbar">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link"href="#">FOOD DELIVERY</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">HOW IT WORKS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">OUR CITIES</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"href="#">SIGN UP</a>
                </li>
              </ul>
            </nav>
            </div>
0 голосов
/ 13 марта 2020

Добавить класс flex-row на <ul class="navbar-nav ml-auto flex-row">

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...