@game802

Как реализовать расстояние между col-8 и col-4 d 30px?

Собственно вопрос вот в чем: Грамотен ли код, с точки зрения реализации?
Если вот такой вот макет:
433bf63cb1d1439db06de878d265f7e2.png
Код для разделения колонок с отступом в 30px:
<div class="container">
   <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8">
                    <div class="col-md-12">test</div>
                </div>

                <div class="col-md-4">
                    <div class="col-md-12">test</div>
                </div>
            </div>
        </div>
    </div>
</div>

Или это делается как-то по другому? Проблема в том, что row наследуемый и по другому у меня не получается сделать. Или я на верном пути? Спасибо!
  • Вопрос задан
  • 709 просмотров
Решения вопроса 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
такой код будет правильнее:
<div class="container">
   <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8">
                    <div class="wr">test</div>
                </div>

                <div class="col-md-4">
                    <div class="wr">test</div>
                </div>
            </div>
        </div>
    </div>
</div>


.wr {padding-left: 30px; padding-right: 30px;}
Ответ написан
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
По идее в bootstrap и так отступы по 15px, а в сумме дают 30px.
А если вы хотите увеличить их в двое к примеру, то я бы отказался от такой вложенности как у вас, я бы пошел иным путем, просто дописал бы немного таблицу стилей, к примеру вот так:
.row.my{padding-right:30px !important;padding-left:30px !important}
.col-lg-1.my,.col-lg-10.my,.col-lg-11.my,.col-lg-12.my,.col-lg-2.my,.col-lg-3.my,.col-lg-4.my,.col-lg-5.my,.col-lg-6.my,.col-lg-7.my,.col-lg-8.my,.col-lg-9.my,.col-md-1.my,.col-md-10.my,.col-md-11.my,.col-md-12.my,.col-md-2.my,.col-md-3.my,.col-md-4.my,.col-md-5.my,.col-md-6.my,.col-md-7.my,.col-md-8.my,.col-md-9.my,.col-sm-1.my,.col-sm-10.my,.col-sm-11.my,.col-sm-12.my,.col-sm-2.my,.col-sm-3.my,.col-sm-4.my,.col-sm-5.my,.col-sm-6.my,.col-sm-7.my,.col-sm-8.my,.col-sm-9.my,.col-xs-1.my,.col-xs-10.my,.col-xs-11.my,.col-xs-12.my,.col-xs-2.my,.col-xs-3.my,.col-xs-4.my,.col-xs-5.my,.col-xs-6.my,.col-xs-7.my,.col-xs-8.my,.col-xs-9.my{padding-right:30px !important;padding-left:30px !important}

И получил бы обычную разметку без лишней вложенности:
<div class="container">
   <div class="row my">
        <div class="col-md-8 my">
             <p>test</p>
        </div>
        <div class="col-md-4 my">
              <p>test</p>
         </div>
    </div>
</div>

Преимущество:
Меньшая вложенность и легче управлять CSS, допустим я считаю что на планшете или мобильном отступы в 30рx это через чур, следовательно приведенный мной CSS который находится выше , заключаем в
@media (min-width:769px){
CSS код
}

Тогда на экране более 768px отступы будут по 30px, а на более мелких экранах стандартные по 15
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы