Как в Bootstrap добавить пару px к сетке?

244

27 июля 2017, 23:56

Использую bootstrap. Создал левое меню и задал ему .col-lg-2. Но оно кажется маленьким, а .col-lg-3 большим =) можно ли как то вручную отрегулировать не ломая сетку? К .col-lg-2 пикселей бы 10 добавить как то.

Answer 1

Например, вы можете создать свою колонку, которая будет отвечать требованиям бустрапа.

Для 3 бутстрапа:

.col-lg-13, 
.col-lg-14 { 
  position: relative; 
  min-height: 1px; 
  padding-right: 15px; 
  padding-left: 15px; 
} 
 
@media (min-width: 1200px){ 
  .col-lg-13, 
  .col-lg-14 { 
    float: left; 
  } 
  .col-lg-13{ 
    width:20% 
  } 
   .col-lg-14{ 
    width:80% 
  } 
}

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-lg-13">.col-lg-13 - на lg 20%</div> 
    <div class="col-lg-14">.col-lg-14 - на lg 80%</div> 
  </div> 
</div>

Для 4 бутсрапа, достаточно добавить класс .col и прописать своему классу только ширину:

@media (min-width: 1200px){ 
  .col-lg-13{ 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 20%; 
    -ms-flex: 0 0 20%; 
    flex: 0 0 20%; 
    max-width: 20%; 
  } 
   .col-lg-14{ 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 80%; 
    -ms-flex: 0 0 80%; 
    flex: 0 0 80%; 
    max-width: 80%; 
  } 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > 
 
<div class="container"> 
  <div class="row"> 
    <div class="col col-lg-13">.col-lg-13 - на lg 20%</div> 
    <div class="col col-lg-14">.col-lg-14 - на lg 80%</div> 
  </div> 
</div>