Блог

Главная - Вопросы по программированию - Ввод SemanticUI больше, чем столбец

Ввод SemanticUI больше, чем столбец

#css #semantic-ui

#css #семантический пользовательский интерфейс

Вопрос:

Я пытаюсь создать следующий дизайн.

введите описание изображения здесь

Пока у меня есть этот код:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content" class="ui vertical stripe segment" style="background: blue;">
  <div class="ui middle aligned stackable grid container">
    <div class="row">
      <div class="ui eight column divided centered griffin form-container grid">
        <div class="four column centered row">
          <div class="booking-type-container center aligned column">

            <label class="radio-button-container">
                                <span>All</span>
                                <input type="checkbox" checked="checked" name="booking_type">
                                <span class="checkmark"></span>
                            </label>


            <label class="radio-button-container">
                                <span>Flight</span>
                                <input type="checkbox" name="booking_type">
                                <span class="checkmark"></span>
                            </label>

            <label class="radio-button-container">
                                <span>Hotel</span>
                                <input type="checkbox" name="booking_type">
                                <span class="checkmark"></span>
                            </label>

          </div>
        </div>
        <div class="row">
          <div class="column">
            <div class="ui mini left icon input">
              <input type="text" placeholder="Search mini...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="column">From City</div>
          <div class="column">To City</div>
          <div class="column">Dates</div>
          <div class="column">Passengers</div>
          <div class="column">Accommodation</div>
          <div class="column">Transfer</div>
          <div class="column">GO</div>
        </div>
      </div>
    </div>
  </div>
</div>

Как вы можете видеть из фрагмента, ввод намного больше, чем столбец, в который он помещен. Как мне сделать его таким же большим, как столбец.

Спасибо

Комментарии:

1. почему вы не задаете входным данным фиксированную ширину

2. Потому что тогда в чем смысл адаптивной сетки?

3. извините, что спрашиваю, но я увидел, что есть наложение отступов, я думал, вы хотите исправить это с помощью css

4. Вы нашли решение для этого?

5. @Shad Мое текущее решение — это взлом. Я создаю отображение «ввода»: блок.