Изменение размера сетки от CSS

Question

Есть область с сетками одинакового размера.Я больше не могу изменить html-код, но мой клиент хочет, чтобы у меня была средняя сетка другого размера, поэтому он хочет что-то вроде col-md-3 col-md-6 col-md-3.Есть ли способ сделать это через css?

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>

Answer 1

Вы можете добавить сюда дополнительный родительский класс для всех столбцов, без редактирования столбцов, новый предложенный макет может быть достигнут с использованием только простого CSS.

@media (min-width: 1200px) {
     .cstm-col .col-md-3 {
         width: 25%;
     }
     .cstm-col .col-md-6 {
         width: 50%;
     }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Default Bootstrap Grid</h3>
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <h4>.col-md-4</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <h4>.col-md-4</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <h4>.col-md-4</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
    </div>
    
    <style>
        @media (min-width: 1200px) {
            .cstm-col .col-md-3 {
                width: 25%;
            }
            .cstm-col .col-md-6 {
                width: 50%;
            }
        }
    </style>
    <h3>Custom Bootstrap Grid</h3>
    <div class="row cstm-col">
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
            <h4>.col-md-3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
            <h4>.col-md-6</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
            <h4>.col-md-3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
        </div>
    </div>

Answer 2

Вы можете сделать это по-разному, и подход зависит от того, как вы хотите, чтобы элементы отображались. Я предполагаю, что вы хотите отобразить три элемента в одной строке для настольных компьютеров и мобильных устройств.

Для Bootstrap 3 используйте

<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>

Это заставит 3 дива появляться в одном ряду как для настольного компьютера, так и для мобильного телефона. Для использования Bootstrap 4 вы можете сделать то же самое, что и ниже.

<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-3"></div>

Если вы не используете загрузчик, вы можете использовать следующее свойство Flex css.

<div class="row">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col1"></div>
</div>

<style>
.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.col {
  width: 25%;
  height: 100px;
  background: #ccc;
  text-align: center;
}
.col2 {
  width: 50%;
  height: 100px;
  text-align: center;
  background: #666;
}

</style>

Вы можете посмотреть решение по этой ссылке: https://codepen.io/sirwhite/pen/arXoXG

Вы также можете сделать это с помощью сетки CSS. оформить заказ https://www.w3schools.com/css/css_grid.asp