Как свертать данный блок на bootstrap?

Question

[dmitriu256]

Пробовал следующим образом:

<div class="container">
            <div class="row">
                <div class="col-md-12 blocks">

                        <div class="stats_header">
                            <h2 class="stats_title">Стрижка у нас <br>
                                это выгодно!</h2>
                            <p class="stats_intro">
                                Мужская стрижка требует точного подхода.
                                Обратимся к статистике:
                            </p>

                            <small class="stats_legend">
                                <sup>*</sup> — приведённые данные ложь
                            </small>
                        </div>


                        <div class="block-table">
                            <table class="table mytable">

                                <tbody>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Mark</td>
                                    <td>Otto</td>

                                </tr>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>

                                </tr>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Larry</td>
                                    <td>the Bird</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>


                </div>


            </div>
        </div>

Однако в таком случае теряется смысл фреймворка, тк ширину блоков stats_header (320px), block-table(640px) задавал вручную.

Дальнейшая адаптация блоков под разные расширения устройств с таким подходом будет происходить вручную - через переопределение широты у элементов.
Опять таки теряется смысл Bootstrap-а.

Другой вариант

<div class="container">
            <div class="row">
  <div class="col-md-4">
           <div class="stats_header"></div>
</div>
  <div class="col-md-8 ">
<div class="block-table"></div>
</div>

Если через col-md-4 к блоку stats_header и col-md-8 к блоку block-table, тогда естественно получаются маргины между col, которые отсутствуют в макете.

Как правильно сверстать данный блок на Bootstrap?
Буду благодарен за ваши советы!

Answer 1

[Антон]

Кол 3 слева, кол 9 справа
Внутри кол9 новый row с четырьмя кол 6

Comments

[dmitriu256]

Сделал по предложенной Вами схеме опять таки отступ между главными блоками

<div class="container">
        <div class="row blokers">
            <div class="col-md-3">
                <div class="block-header"></div>
            </div>
            <div class="col-md-9">
                <div class="block-tables">
                    <div class="col-md-6">Блок1</div>
                    <div class="col-md-6">Блок2</div>
                    <div class="col-md-6">Блок3</div>
                    <div class="col-md-6">Блок4</div>
            </div>
        </div>
         </div>
    </div>

Насколько верно будет в данном случае обнулить падинги у колонок?
/* padding-right: 15px; */
/* padding-left: 15px; */

[Антон]

dmitriu256, Настолько, насколько это будет соответствовать вашим потребностям. Если нужно обнулить, обнуляйте, ведь это же решит Вашу проблему? Да, решит, ну и, собстна, всё

[dmitriu256]

Антон, Спасибо за помощь.

Answer 2

[profesor08]

.col-4
.col-4
  .col-12
  .col-12
.col-4
  .col-12
  .col-12

Comments

[dmitriu256]

Но ведь всеравно останется внешний отступ между блоками (ведь col-* имеет * padding-right: 15px; padding-left: 15px; ). Возможно ли их обнулить в данном случае? При обнуленных падингах два блока прижутся и не будет отступа как на картинке, прилагаю