2

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

2
  • В самих исходниках bootstrap, но это не рекомендуется делать 27 июл 2017 в 1:02
  • Дайте id этому ряду, для него переопределите width колонок, вот и все дела. 27 июл 2017 в 6:51

1 ответ 1

2

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

Для 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>

Аналогично, можете прописать для другой ширины экрана, или использовать стандартные бутсрап классы с sm, md, xl.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.