Как добавить промежуток между каждым разделом сетки, используя bootstrap - PullRequest
Новая
       0

Как добавить промежуток между каждым разделом сетки, используя bootstrap

0 голосов
/ 07 мая 2020

Я просмотрел информацию Bootstrap в Интернете, а также несколько ответов здесь, но я все еще не могу найти способ поставить пробел между каждым из разделов в сетке. Любая помощь будет принята с благодарностью. 

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
    	<div class="div-left"><h2>Title1</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>

Структура

Grid Structure

1 Ответ

0 голосов
/ 07 мая 2020

Вы можете использовать классы margin (m) и padding (p), которые включены в bootstrap, например, 

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#214B68;">
    <div class="div-left m-3"><h2>Title1</h2>
    <a class="btn btn-primary" href="#" role="button">Link</a>  
    </div>
    <div class="div-right"><i class="fas fa-clock"></i></div>
</div>

Вы можете смешивать m и p с r t b l (справа, сверху, снизу, слева), чтобы получить нужный интервал. Например, mr-3 (margin-right: 3em;)

Здесь есть дополнительная информация: https://getbootstrap.com/docs/4.4/utilities/spacing/

ИЗМЕНИТЬ ДЛЯ ИСПРАВЛЕНИЯ СТРУКТУРЫ СЕТКИ.

Кажется, вы хотите разделить строки, но только некоторые из ваших разделов имеют определенные строки. Если вы убедитесь, что каждый раздел находится в классе строки, вы можете добавить CSS следующим образом: 

.row {
    margin-bottom: 3em;
}

Рабочий код выглядит следующим образом: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <style>

.row {margin-bottom: 3em;}


  i {
    color: white;
    font-size: 150px;
    padding-right: 20px;
    float:right;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  h2 {
    color: white;
  }

  h3 {
    color: white;
  }

  .col-sm-6, .col-sm-4, .col-sm-12 {
  min-height: 200px;
  }

  .btn-primary {
    background-color: white;
    color:#214B68;
    border: none;
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
  }



  </style>

</head>
<body>

<div class="container">   
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
    <div class="div-left"><h2>Title1</h2>
    <a class="btn btn-primary" href="#" role="button">Link</a>  
    </div>
    <div class="div-right"><i class="fas fa-clock"></i></div>
</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
        <div class="div-left m-3"><h2>Office Removals</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#1BB1A2;">
        <div class="div-left m-3"><h2>House Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>
    </div>
<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#1BB1A2;">
        <div class="div-left m-3"><h2>Office Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#1BB1A2;">
        <div class="div-left"><h2>Garage Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>
    </div>
<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#EA5380;">
        <div class="div-left"><h2>Collection and Delivery</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Pricing For All Services</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
        </div>
        </div>
<div class="row">

        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Free Quote</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
        </div>
        </div>
<div class="row">

        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Tips and Guides For Moving House</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
    </div>
  </div>

</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...