时间戳

首页 > 解决方案 > 从 css 更改网格大小

css - 从 css 更改网格大小

问题描述

有一个区域具有相同大小的网格。我无法再更改 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>

标签： csstwitter-bootstrap-3

解决方案

您可以通过不同的方式执行此操作，方法取决于您希望元素呈现的方式。我假设您想在桌面和移动设备的单行上显示这三个元素。

对于 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

推荐阅读