Макет Bootstrap 4 с одним фиксированным столбцом ширины

Question

Это мой HTML-код:

<div class="container-fluid d-flex h-100">
  <div class="white h-100" style="background-color: white;">
    fixed 100px
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
  <div class="col-6 red h-100" style="background-color: red;">
    6
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
</div>

Можете ли вы помочь мне исправить мой код, пожалуйста? Мне нужно в левой колонке с фиксированной шириной, которая будет иметь 100px. Этот столбец не имеет изменения размера. Остальное пространство, которое мне нужно, должно быть динамически регулируемым в соотношении 1: 2: 1. Спасибо за помощь.

html css twitter-bootstrap

26

Denis Stephanov 7 Сен 2017 в 21:07

Answer 1

@ Денис Стефанов, вы можете создать гибкий элемент, который не сжимается и не увеличивается и имеет фиксированную ширину, используя следующее правило CSS:

.flex-fixed-width-item {
    flex: 0 0 100px;
}

Это сокращение от flex-grow, flex-shrink и flex-basis. Подробнее об этих свойствах можно прочитать в этой статье о хитростях CSS.

Добавление этого класса в ваш столбец с фиксированной шириной:

<div class="container-fluid d-flex h-100">
  <div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
    fixed 100px
  </div>
  ...

Тогда сохраняйте соотношение столбцов таким же:

  ...
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
  <div class="col-4 red h-100" style="background-color: red;">
    4
  </div>
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
</div>

Вы получите запрошенный результат, который вы можете просмотреть в этом проекте codeply.

24

Jade Cowan 7 Сен 2017 в 18:22

Answer 2

Bootstrap 4 имеет встроенные компоненты компоновки.

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

Ссылка: https://getbootstrap.com/docs/4.0/ макет / сетки / # установка - одну колонку шириной

Если вы хотите, чтобы столбец с установленной шириной имел фиксированную ширину в пикселях, вы можете опустить .col-4 и добавить собственный класс ширины в пикселях.

<div class="container">
  <div class="row">
    <div class="col-pixel-width-100">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

// style.css
.col-pixel-width-100 { flex: 0 0 100px; }

11

Solvitieg 25 Апр 2018 в 23:13

Answer 3

Есть встроенное решение в начальной загрузке 4.

Попробуй это;

<div class="container">
    <div class="row">
        <div class="col-12 col-md">
            content
        </div>
        <div class="col-12 col-md-auto">
            <div style="background: red; width: 300px;">
                sidebar
            </div>
        </div>
    </div>
</div>

Демонстрация: https://www.bootply.com/WiegnnJbxX

30

merkdev 28 Фев 2018 в 11:31

Макет Bootstrap 4 с одним фиксированным столбцом ширины

3 ответа

Новые вопросы

html