Как сделать так, чтобы кнопки начальной загрузки в панели навигации охватывали всю панель навигации - PullRequest
Новая
       5

Как сделать так, чтобы кнопки начальной загрузки в панели навигации охватывали всю панель навигации

0 голосов
/ 11 сентября 2018

Я сейчас использую bootstrap, чтобы создать свою панель навигации, и единственные вещи, которые мне нужны в моей панели навигации, - это 3 кнопки , которые при нажатии на ссылку ведут на другие страницы.На данный момент у меня это выглядит так:

https://i.stack.imgur.com/31s1f.jpg

Как видите, все эти кнопки имеют размер текста, который в них находится.Для них и сейчас довольно простой код: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">

    <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class="nav navbar-left">
        <button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
      </ul>

      <ul class="text-center">
        <button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
      </ul>

      <ul class="nav navbar-right">
        <button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
      </ul>

  </div>
</nav>

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

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Добро пожаловать в сообщество.

flex-grow-1 занимает столько места, сколько доступно.

Есть несколько способов сделать это. Но я думаю, что лучше использовать класс flex-grow-1 на buttons.

В нем нет ошибок, и если для трех не хватает места на одной и той же строке, линия разрывается, и каждый из них занимает всю строку. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">MY PROFILE</button>
</nav>

https://codepen.io/anon/pen/YOaXwb

Теперь, поскольку есть три элемента с классом flex-grow-1, ширина их родителя пропорционально разделена между ними.

Вы можете использовать класс m-* или my-* на кнопках для добавления некоторого поля. Если линия обрывается, хорошо, чтобы под кнопками было одинаковое пространство.

https://codepen.io/anon/pen/vzRNWm

Если вы хотите, чтобы каждая из кнопок занимала 100% ширину навигационной панели, используйте d-block для навигационной панели и w-100 для кнопок.

  • navbar - это flex по умолчанию. d-block делает это block
  • w-100 устанавливает ширину кнопок на 100%

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-block ">
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">MY PROFILE</button>
</nav>

https://codepen.io/anon/pen/eLMpJX

0 голосов
/ 11 сентября 2018

Вам необходимо использовать элемент li внутри элемента ul. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body>

  <nav class="navbar navbar-dark">

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
      </li>
    </ul>

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
      </li>
    </ul>

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
      </li>
    </ul>

  </nav>
...