Как я могу растянуть ввод, чтобы заполнить контейнер в Bulma? - PullRequest
Новая
       11

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

0 голосов
/ 04 апреля 2019

Я строю навигацию с помощью Bulma, и мне интересно, есть ли правильный способ для достижения этого типа макета:

enter image description here

Например, у меня есть логотип, два поля ввода и кнопка, а затем еще одна кнопка в конце.И мне нужны поля ввода и их кнопки, чтобы растянуть и заполнить пространство между логотипом и кнопкой.Есть ли способ, которым я могу достичь этого с Булмой, не будучи слишком грязным?(Я не уверен, что мне следует использовать столбцы внутри навигационной системы, поэтому мне интересно, есть ли другой способ.)

Это мой код: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>


<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      Logo
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <div class="field is-marginless">
        <div class="control">
          <input class="input" type="text" placeholder="Text here">
        </div>
      </div>
      <div class="field is-marginless">
        <div class="control">
          <input class="input" type="text" placeholder="Text here">
        </div>
      </div>
      <div class="field is-marginless">
        <div class="control">
          <button class="button is-primary"><i class="fas fa-search"></i></button>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            Register
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

Я новичок в Bulma, поэтому извините, если этот вопрос слишком простой.Но я просмотрел их документацию и не мог понять это.Спасибо!

...