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

您可以通过不同的方式来执行此操作，并且该方法取决于您希望元素呈现的方式。我假定您要在台式机和移动设备上的一行中显示这三个元素。

对于Bootstrap 3使用

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

这将强制3个div在台式机和移动设备上显示在同一行中。对于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

Answer 2

您可以在此处向所有列添加一个额外的父类，而无需编辑列，仅通过使用简单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>

从CSS更改网格大小

2 个答案: