Блог

Главная - Вопросы по программированию - Нужно сделать 3 колонки, и я хочу сделать это с помощью Divs, но это не работает

Нужно сделать 3 колонки, и я хочу сделать это с помощью Divs, но это не работает

#html #bootstrap-4

Вопрос:

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

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <p class="section-subtitle wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s"></p>
</div>
<div class="section-header">
  <h2 class="section-title wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">Services Offered</h2>
  <hr class="lines wow zoomIn" data-wow-delay="0.3s">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4, col-md-6">
      <div class="item-boxes wow fadeInDown" data-wow-delay="1.2s">
        <div class="icon">
          <i class="fa fa-handshake-o"></i>
        </div>
        <h4><a href="advisory.html">Advisory and professional services</a></h4>
      </div>
      <div class="col-md-4, col-md-6">
        <div class="item-boxes wow fadeInDown" data-wow-delay="0.8s">
          <div class="icon">
            <i class="fa fa-money"></i>
          </div>
          <h4><a href="Pay.html">Payroll Outsourcing</a></h4>
          <p></p>
        </div>
      </div>
      <div class="col-md-4, col-md-6">
        <div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
          <div class="icon">
            <i class="fa fa-id-card"></i>
          </div>
          <h4><a href="staff.html">Staffing Solutions</a></h4>
          <p></p>
        </div>
      </div>
    </div>
  </div>

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

1. Вы также захотите изменить свои классы, потому что наличие md-4 и md-6 в одном и том же div противоречат правилам, и 6 будет переопределять 4 (потому что 6 указан как более поздний класс). Но у вас может быть разная ширина столбцов, если индикатор точки останова отличается: col-md-4 col-lg-6 .

2. Чтобы уточнить, md-6 указан ли он позже в файле CSS ? Не имеет значения, как это указано в разметке.

Ответ №1:

Обновите свои классы, чтобы удалить запятые. (Я использовал col-4 в демонстрационных целях; возможно, вы захотите использовать col-md-4 . Однако также не используйте col-md-6 . Это не имеет смысла.)

Затем вы пропустили закрывающий тег div после первого столбца. Хороший редактор сделает такие вещи более очевидными.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <p class="section-subtitle wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s"></p>
</div>

<div class="section-header">
  <h2 class="section-title wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">Services Offered</h2>
  <hr class="lines wow zoomIn" data-wow-delay="0.3s">
</div>

<div class="container">
  <div class="row">
    <div class="col-4 col-md-6">
      <div class="item-boxes wow fadeInDown" data-wow-delay="1.2s">
        <div class="icon">
          <i class="fa fa-handshake-o"></i>
        </div>
        <h4><a href="advisory.html">Advisory and professional services</a></h4>
      </div>
    </div>

    <div class="col-4 col-md-6">
      <div class="item-boxes wow fadeInDown" data-wow-delay="0.8s">
        <div class="icon">
          <i class="fa fa-money"></i>
        </div>
        <h4><a href="Pay.html">Payroll Outsourcing</a></h4>
        <p></p>
      </div>
    </div>

    <div class="col-4 col-md-6">
      <div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
        <div class="icon">
          <i class="fa fa-id-card"></i>
        </div>
        <h4><a href="staff.html">Staffing Solutions</a></h4>
        <p></p>
      </div>
    </div>
  </div>
</div>

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

Метки: , ,