Брусок навигации с 12 колоннами в Bootstrap

Как я могу делать для того, чтобы брусок навигации упорствовал всегда в 12 колоннах с Bootstrap? Я знаю, что я должен использовать <div class="row"> и <div class="col-*-*">.

Но проблема состоит в том, что есть слишком много этикеток <div> и я не знаю хорошо, где размещать уже упомянутые этикетки.

То, что происходит со мной, когда я уменьшаю браузер:

introducir la descripción de la imagen aquí

То, что я желаю, уменьшив браузер:

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">LoveMatch<span class="glyphicon glyphicon-heart" style="color:red"></span></a>
      </div>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
      </div>
    </nav>
  </body>
</html>
2
задан 19.01.2017, 01:19
0 ответов

Здесь внутри пойдет весь твой код.

Функционируй равно, с Bootstrap всегда ты будешь считать максимумом 12 колонн, не импортируя ничего, нет способа, которого ты превосходил бы их.

Когда у тебя есть один div внутри другого, будут получены 12 колонн div отец:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <p>Este es el div padre.</p>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <p>Este es el div hijo, y tomará las 12 columnas de referencia al div padre.</p>
  </div>
</div>
1
ответ дан 03.12.2019, 17:37
  • 1
    Привет Я Отдаляю... пожалуйста, не показывай твоей личной информации в ответах... –  18.01.2017, 23:55

чтобы упоминать о том, что ты будешь использовать 12 колонн, он

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12>
</div>

С этим ты способствуешь, тому, чтобы не импортируя размера экрана, он всегда был 12

Здесь ты можешь находить немного больше информации "cols"

0
ответ дан 03.12.2019, 17:37