Ввод SemanticUI больше, чем столбец - PullRequest
Новая
       15

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

0 голосов
/ 12 марта 2019

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

enter image description here

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

<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>

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

Спасибо

...