Блог

Главная - Вопросы по программированию - Как создать дизайн ниже, используя столбцы в bootstrap?

Как создать дизайн ниже, используя столбцы в bootstrap?

#html #css #bootstrap-4

#HTML #css — код #bootstrap-4

Вопрос:

Я использовал следующую стратегию: разделив его на два равных столбца col-md-6. Снова разделение col-md-6 на 3 столбца, каждый из которых, т.Е. col-md-4. То же самое для правой стороны. но возникает проблема в том, как сделать равномерное расстояние между столбцами с правой стороны.

введите описание изображения здесь

Мой код

 <div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="col-md-4 text-center">
                <p>My Earning</p>
            </div>
            <div class="col-md-4 text-center">
                <h5>100</h5>
                <p>Number of Notes Sold</p>
            </div>
            <div class="col-md-4 text-center">
                <h5>$10,000</h5>
                <p>Money Earned</p>
            </div>
        </div>

        <div class="col-md-6">
            <div class="col-md-4 ">
                <h5>38</h5>
                <p>My Downloads</p>
            </div>
            <div class="col-md-4">
                <h5>12</h5>
                <p>My Rejected Notes</p>
            </div>
            <div class="col-md-4 data">
                <h5>102</h5>
                <p>Buyer Requests</p>
            </div>
        </div>
    </div>
</div>

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

1. Первое, что приходит мне в голову, — это вставить ПУСТЫЕ ячейки таблицы между ними с фиксированной шириной.

Ответ №1:

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

Я думаю, это вам поможет.

 .row div div{
    border: 1px solid #000;
    text-align:center;
}
.row .no-gutters{
padding:0px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-sm-2 no-gutters">
      <div>one</div>
    </div>
    <div class="col-sm-4 no-gutters">
      <div>two</div>
    </div>
    <div class="col-sm-2">
      <div>three</div>
    </div>
    <div class="col-sm-2">
      <div>four</div>
    </div>
    <div class="col-sm-2">
      <div>five</div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>