Как центрировать 3 дива с помощью загрузочной сетки

ProgramBox

Как центрировать 3 дива с помощью загрузочной сетки

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#html #css #bootstrap-4 #sass

Вопрос:

У меня здесь дилемма.

Мне нужно центрировать 3 дива с помощью начальной загрузки. Проблема в том, что средние дивы должны быть col-1. Если а поступит так:

 <div class="row">
 <div class="col-auto"> div a</div>
 <div class="col-1">div b</div>
 <div class="col-auto"> div c</div>
</div>

Я получаю то, что мне нужно, в одной строке, но мне нужно выровнять несколько строк, и все они имеют разное содержимое.
Мне нужно, чтобы это было выровнено на основе среднего div.
Есть какие-нибудь идеи?

Решения, использующие фреймворк начальной загрузки, необработанный CSS или Sass, приветствуются.

PS: когда компания поставила бэкэнд-разработчика на передний план! ** Спасибо вам **

Ответ №1:

вы можете использовать justify-content-center для центрирования.

Не используйте col-auto его, он не будет реагировать. так что лучше использовать просто col или col-4 .. col-md-4 .это делает отзывчивым автоматически

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
 <div class="col-auto">div a</div>
 <div class="col-1">div b</div>
 <div class="col-auto"> div c</div>
</div>

1. Я поместил картинку, может быть, проще визуализировать то, что мне нужно, на картинке ваше решение, оно отлично подходит для одной строки. Но не для нескольких

2. Это отлично работает для экранов среднего и выше, но делает его адаптивным для экранов меньшего размера.

Ответ №2:

Это зависит от того, какую версию начальной загрузки вы используете. Если вы используете v4 и выше, вы можете использовать класс justify-content-center для своего .row элемента. Например…

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-5">

  <div class="row justify-content-center bg-light py-3">
    <div class="col-auto">
      <div class="bg-secondary p-3 rounded text-nowrap">div a</div>
    </div>
    <div class="col-1">
      <div class="bg-primary p-3 rounded text-nowrap">div b</div>
    </div>
    <div class="col-auto">
      <div class="bg-secondary p-3 rounded text-nowrap">div c</div>
    </div>
  </div>

</div>

Более подробную информацию о выравнивании сетки можно найти в документах здесь: https://getbootstrap.com/docs/4.6/layout/grid/#alignment

Редактировать

Потому что ОП сказал, что решение выше:

отлично подходит для одного ряда. Но не для нескольких

Для нескольких строк вы просто повторяете всю .row структуру… Я привел здесь пример: https://jsfiddle.net/thelevicole/9axysvun/

Я также создал версию, которая полностью реагирует: https://jsfiddle.net/thelevicole/9axysvun/1/ смотрите скриншоты ниже…

Более крупные устройства:

Устройства меньшего размера:

1. Ну нет, мне нужно, чтобы центральный div был col-1 (обязательно), я пробовал, но мне нужно несколько строк. это выравнивает одну строку

2. @albertosetim ширина столбцов в моем ответе была примерами, я обновил их, чтобы они соответствовали вашим вопросам. Это помогает?

3. Я поместил картинку, может быть, проще визуализировать то, что мне нужно, на картинке ваше решение, оно отлично подходит для одной строки. Но не для нескольких.

4. @albertosetim Спасибо за добавление фотографии, определенно полезно! Пожалуйста, посмотрите мое редактирование выше, я включил пример того, как обрабатывать несколько строк. Надеюсь, это поможет!

Ответ №3:

Вы можете попробовать что-то вроде этого:

 <div class="row col-md-offset-2">
    <div class="col-md-3 box"></div>
    <div class="col-md-3 box"></div>
    <div class="col-md-3 box"></div>
</div>

PS: если это сработает, то поднимите голос, потому что я тоже бэкенд-парень :p

Ответ №4:

Это решение, с которым я сейчас иду, спасибо вам всем.

 <div class="row justify-content-center">
  <div class="col-md-5 box"></div>
  <div class="col-md-1 box"></div>
  <div class="col-md-5 box"></div>
</div>

Один col-1 отсутствует, но центр обоснования содержимого помогает разделить пространство между ними.
Отзывчивость-это следующая проблема доу.

Метки: Как центрировать 3 дива с помощью загрузочной сетки