Блог

Главная - Вопросы по программированию - Bootstrap для создания столбцов одинаковой высоты

Bootstrap для создания столбцов одинаковой высоты

#html #css #twitter-bootstrap-3 #flexbox

#HTML #css #twitter-bootstrap-3 #flexbox

Вопрос:

У меня есть 2 столбца на странице с использованием Bootstrap, но один столбец больше другого. Что я хочу сделать, так это чтобы оба столбца были одинаковой высоты, чтобы я мог выровнять содержимое более короткого столбца внизу.

Я прочитал пару подходов, таких как margins , flexbox , и tables .

Я попробовал flexbox , и это работает для больших размеров экрана, но когда я перехожу к мобильным размерам, столбцы не складываются, как раньше, до того, как я добавил к ним стиль flexbox. Поля, которые я еще не пробовал, потому что для меня это немного странно. Таблицы — я не знаю, мне просто не нравится использовать таблицы для макета в целом.

Вот скрипка, если вы хотите попробовать ее.

HTML

 <div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12">
        <h4 class="search-header bold">Deadline</h4>
        <div class="form-group">
          <label for="select-deadline" class="control-label">Deadline Type</label>
          <select name="deadline" id="select-deadline" class="form-control">
            <option value="">Upcoming</option>
            <option value="" selected="selected">Sponsor</option>
            <option value="">Internal</option>
          </select>
        </div>
        <div class="form-group">
          <label for="input-days" class="control-label">Due Within How Many Days?</label>
          <input type="text" class="form-control" id="input-days" />
        </div>
        <div class="divider bold italic"><span class="divider-line">amp;mdash;</span> or <span class="divider-line">amp;mdash;</span></div>
        <div class="form-group">
          <label for="input-date" class="control-label">Last Day to Search</label>
          <input type="text" class="form-control" id="input-date" />
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="col-md-12 action-btn-container">
        <button type="button" class="btn btn-default btn-action">Clear All</button>
        <button type="button" class="btn btn-default btn-action">Search</button>
      </div>
    </div>
  </div>
</div>

CSS

 .action-btn-container {
  text-align: right;
}

Обновить:

Вот пример того, как я пытался решить проблему с помощью. flexbox

Ответ №1:

Я попробовал flexbox, и он работает для больших размеров экрана, но когда я перехожу к мобильным размерам, столбцы не складываются, как раньше, до того, как я добавил к ним стиль flexbox.

Начальная настройка контейнера flex такова flex-wrap: nowrap .

Это означает, что по умолчанию дочерние элементы («гибкие элементы») будут вынуждены оставаться в одной строке независимо от размера экрана.

Если вы хотите, чтобы столбцы располагались вертикально на экранах меньшего размера, добавьте это в контейнер:

 flex-wrap: wrap

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

1. Вот моя обновленная скрипка со flexbox стилем. Почему более короткий столбец, похоже, не учитывает соотношение 4-8 на экранах меньшего размера?

2. Потому .flex-col { flex: 1; } что применяется к обоим столбцам. Правило предписывает им равномерно распределять пространство между собой. Когда вы удаляете его, ширина начальной загрузки восстанавливается: jsfiddle.net/m8skcbj5/5

3. О, я понимаю, спасибо! Я просто скопировал это из вопроса, который я прочитал ранее. Не знал, что он делает, поэтому я не стал его удалять.

4. Привет, @Michael_B, flexbox заставил столбцы вести себя по-другому. Когда они складываются, они больше не занимают всю ширину, вместо этого они просто складываются, но сохраняют ширину, которую они имеют в данный момент. Вы можете сравнить эту скрипку , которая является поведением, которое я хочу, и вашу скрипку с равными высотами, используя flexbox.

5. Ну, вы сталкиваетесь со стилями начальной загрузки. Вам нужно переопределить их. Вот пример использования медиа-запроса: jsfiddle.net/m8skcbj5/9