Bootstrap 对类的所有示例使用相同的col-md-* 和col-lg-*

368yc8dk 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(131)

我使用的是Bootstrap 5.2，目标是github页面，这是我的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web project</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .left-column {
            background-color: red;
            /* Other things */
        }
        .right-column {
            background-color: lightblue;
            /* Other things */
        }
    </style>
</head>

<body>
<script src="bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="left-column col-lg-3 col-md-6">AAA</div>
        <div class="right-column col-lg-9 col-md-6">BBB</div>
    </div>
    <div class="row">
        <div class="left-column col-lg-3 col-md-6">CCC</div>
        <div class="right-column col-lg-9 col-md-6">DDD</div>
    </div>
</div>
</body>
</html>

对于每个左列，我也指定col-lg-3 col-md-6，对于每个右列，我也指定col-lg-9 col-md-6。

问题：既然每个left-column也使用col-lg-3 col-md-6，有没有办法避免每次都指定它们？理想情况下，我希望我的.left-column声明使用col-lg-3和col-md-6，但我不知道如何使用。

当然，我可以通过使用@media，并根据min-width/max-width指定width来实现这一点，但方法如下：
1.我将通过复制 Bootstrap 所做的工作来重新发明轮子

CSS将变得更难看，因为我必须复制或拆分left-column的声明
这个问题与：Can a CSS class inherit one or more other classes?。公认的答案使用LESS，但我不能使用。其他答案大多是“你不能”，但它们非常古老。最接近的方法似乎是https://stackoverflow.com/a/19552985/15072863，但它只适用于已经存在的元素。

twitter-bootstrap

来源：https://stackoverflow.com/questions/73805967/use-same-col-md-and-col-lg-for-all-instances-of-the-class

1条答案

按热度按时间

cgh8pdjw1#

Bootstrap 5使用scss，您应该使用它，请参阅此处的https://stackoverflow.com/a/73709723/3807365示例：

// File: my-bootstrap-and-styles.scss

// your overrides
$primary : #FEBC35;

// include bootstrap.scss
@import "../node_modules/bootstrap/scss/bootstrap";   

// Then add your additional custom code here
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}

// also don't forget to take advantage
// of bootstrap's variables and mixins
@include media-breakpoint-down(md) {
    .my-class {
        overflow-y: auto;
    }
}

之后就只剩下：

.left-column {
    background-color: red;
    @extend .col-lg-3;
    @extend .col-md-6;
    /* Other things */
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 对类的所有示例使用相同的col-md-* 和col-lg-*

1条答案

相关问题

热门标签

最新问答