Столбцы начальной загрузки не отображаются рядом друг с другом

Question

Я использую Bootstrap 4 и у меня возникли проблемы с частью Footer. Я хочу создать три столбца одинаковой ширины, используя класс col-md-6, как описано в документации, это мой код:

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <p>2018 © Hello World!</p>
      </div>
      <div class="col-md-6">
        <div class="text-md-right footer-links d-none d-md-block">
          <a href="javascript: void(0);">About</a>
          <a href="javascript: void(0);">Support</a>
          <a href="javascript: void(0);">Contact Us</a>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <select>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</footer>

и это CSS, применяемый для стилизации нижнего колонтитула:

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}

Результат был совершенно неверным, я должен выровнять содержимое по центру столбца, который содержит элемент, но я получаю все элементы как:

это скрипка .

Ожидаемый результат должен быть таким:

| 2018© Hello World! | About Support Contact Us | 1

Эти | символы являются поддельными разделителями, в которых я использовал разделитель для столбца. Эти три столбца должны быть увеличены в зависимости от разрешения Windows.

Answer 1

Проблема в вашем коде заключается в том, что класс "col-md" применяется только тогда, когда ширина контейнера превышает 768, что является точкой останова "md". Если вы видите Fiddle в макете по умолчанию, ваш экран будет разделен на четыре области, а предварительный просмотр имеет ширину менее 768 пикселей, так что вы получите сложенные элементы div ... Кроме того, как указано выше в других ответах, вы должны использовать «-4» вместо «-6» в ваших классах, поскольку система сетки Bootstrap основана на макете из 12 столбцов.

Итак, измените классы "col-md-6" на "col-sm-4", и вы получите то, что ищете. (Здесь «col-sm-» обозначает точку останова на маленьком экране)

Answer 2

Поскольку следует правило сетки - система из 12 столбцов, поэтому следует использовать сетку таким образом, чтобы ее сумма составляла 12.

<footer class="footer">
<div class="container-fluid">
<div class="row">
  <div class="col-xs-4">
    <p>2018 © Hello World!</p>
  </div>
  <div class="col-xs-4">
    <div class="footer-links d-none d-md-block">
      <a href="javascript: void(0);">About</a>
      <a href="javascript: void(0);">Support</a>
      <a href="javascript: void(0);">Contact Us</a>
    </div>
  </div>
  <div class="col-xs-4">
    <div>
      <select>
        <option>1</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>

CSS

.footer {
border-top: 1px solid rgba(152,166,173,.2);
bottom: 0;
padding: 19px 30px 20px;
position: absolute;
right: 0;
color: #98a6ad;
/* left: 250px; */
}

Answer 3

Вам нужно использовать только col (https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <p>2018 © Hello World!</p>
      </div>
      <div class="col">
        <div class="text-md-right">
          <a href="javascript: void(0);">About</a>
          <a href="javascript: void(0);">Support</a>
          <a href="javascript: void(0);">Contact Us</a>
        </div>
      </div>
      <div class="col">
        <div>
          <select>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</footer>

Answer 4

Система сетки начальной загрузки поставляется с 12 столбцами из коробки, поэтому, если вы не измените ее, она будет 12.

Из документации по начальной загрузке :

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

С 12 / 3 = 4

---

Но начиная с Bootstrap 4 вам не нужно явно объявлять ширину столбцов. Он рассчитает ширину ваших столбцов на основе того, сколько у вас есть

Таким образом, вы получите что-то вроде этого (из документации Boostrap ):

<div class="row">
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
</div>

И это должно выглядеть так:

Кроме того, я бы не стал определять ненужные правила CSS.