Отступ между блоками в bootstrap

743

26 ноября 2016, 18:41

Привет всем, есть страница с тремя блоками с фиксированной высотой. Для адаптации блоков использую bootstrap. Если я задаю отступ между блоками, например: margin: 5px; то третий блок уходит под остальные блоки. Как решить такую проблему?

http://codepen.io/zagonicb/pen/YGbXXy

<html>
<head>
  <meta charset="UTF-8" />
  <title>first page</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container flex-container">
      <div class="row">
        <!-- first block -->
        <div class="col-xs-12 col-md-4 block" style="background-color: lightcoral">
          <p>MARK MANSON</p>
          <p>The darkside of the digital normad</p>
          <a href="#">Travel</a>
          <a href="#">close</a>
        </div>
        <!--second block-->
        <div class="col-xs-12 col-md-4 block" style="background-color: darkorange">
          <p>
             The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author:
          </p>
          <p>
            Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
          </p>
        </div>
        <!--third block-->
        <div class="col-xs-12 col-md-4 block" style="background-color: turquoise">
          <p>comments(45)</p>
          <ul>
            <li>comment 1</li>
            <li>comment 1</li>
            <li>comment 1</li>
            <li>comment 1</li>
          </ul>
        </div>
      </div>
    </div>
</body>
</html>

.flex-container {
   display: flex;
   align-items: center;
   height: 600px;
}
.block {
   height: 300px;
   margin-left: 5px;
}

Answer 1

Как решить такую проблему?

Не добавлять стили bootstrap блокам формирующим сетку. Создайте блок с class="block" внутри col- и добавляйте им нужные стили.

Например так:

.container {   
  height: 600px; 
} 
 
.block { 
  height: 300px; 
} 
 
@media (min-width: 992px){ 
  .container { 
      width: 1200px; 
  } 
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
  <div class="container"> 
      <div class="row"> 
        <!-- first block --> 
        <div class="col-xs-12 col-md-4 col-lg-4" > 
          <div class="block" style="background-color: lightcoral;"> 
            <p>MARK MANSON</p> 
            <p>The darkside of the digital normad</p> 
            <a href="#">Travel</a> 
            <a href="#">close</a> 
          </div> 
        </div> 
        <!--second block--> 
        <div class="col-xs-12 col-md-4 col-lg-4" > 
          <div class="block" style="background-color: darkorange;"> 
            <p> 
               The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author: 
            </p> 
            <p> 
              Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators. 
            </p> 
          </div> 
        </div> 
        <!--third block--> 
        <div class="col-xs-12 col-md-4 col-lg-4" > 
          <div class="block" style="background-color: turquoise; margin: 0 20px;"> 
            <p>comments(45)</p> 
            <ul> 
              <li>comment 1</li> 
              <li>comment 1</li> 
              <li>comment 1</li> 
              <li>comment 1</li> 
            </ul> 
          </div> 
        </div> 
      </div> 
    </div>

Или же, если с фоном ячеек нужен изначальный вариант, то так:

.container {   
  height: 600px; 
} 
 
.block { 
	height: 300px; 
} 
 
@media (min-width: 992px){ 
  .container { 
      width: 1200px; 
  } 
}

 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
  <div class="container"> 
      <div class="row"> 
        <!-- first block --> 
        <div class="col-xs-12 col-md-4 col-lg-4" style="background-color: lightcoral;"> 
          <div class="block" > 
            <p>MARK MANSON</p> 
            <p>The darkside of the digital normad</p> 
            <a href="#">Travel</a> 
            <a href="#">close</a> 
          </div> 
        </div> 
        <!--second block--> 
        <div class="col-xs-12 col-md-4 col-lg-4" style="background-color: darkorange;"> 
          <div class="block" > 
            <p> 
               The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author: 
            </p> 
            <p> 
              Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators. 
            </p> 
          </div> 
        </div> 
        <!--third block--> 
        <div class="col-xs-12 col-md-4 col-lg-4" style="background-color: turquoise;"> 
          <div class="block" style="margin: 0 20px;"> 
            <p>comments(45)</p> 
            <ul> 
              <li>comment 1</li> 
              <li>comment 1</li> 
              <li>comment 1</li> 
              <li>comment 1</li> 
            </ul> 
          </div> 
        </div> 
      </div> 
    </div>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вертикальный отступ у блока

Проблема такаяБлок с классом

287

CSS

Запретить скролл вверх

Существует ли возможность с помощью js/jquery сделать так, чтобы пользователь мог прокручивать страницу вниз, а вверх не мог ? Если можно, то подскажите,...

413

CSS

Как скролить фиксированный блок, если он не влезает на экран?

Собственно есть мобильное меню с position: fixed, в нем много пунктов меню, которые не влезают на экран моб телефона, но при попытке проскрулить вниз,...

458

CSS

Кликабельность кнопок в новом окне

При открытии нового окна span становится не кликабельнымКод открытия нового окна

273