Bootstrap 引导CSS col-md换行符上的不同颜色

5ktev3wc 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(143)

我有一个使用bootstarp的响应式网站。在其中一个页面中，我有一个简单的div列表，如下所示：

<div class="row">
<div class="holder col-md-3"><div class="block_content">1</div></div>
<div class="holder col-md-3"><div class="block_content">2</div></div>
<div class="holder col-md-3"><div class="block_content">3</div></div>
<div class="holder col-md-3"><div class="block_content">4</div></div>
:
:
<div class="holder col-md-3"><div class="block_content">20</div></div>
</div>

前端正在使用react，如果这很重要的话。我正在寻找实现一个特性，其中每一个新的行将有一个不同的颜色。
我不知道会有多少项，但我知道上限应该是20左右（所以对于col-md-3，它意味着5行）。
但我已经看到，对于小屏幕，有时bootstrap打破行后3项，而不是4。
是否有办法实现每行不同的颜色？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73105358/bootstrap-css-different-color-on-col-md-newline

2条答案

按热度按时间

falq053o1#

第一次，您需要在div中使用一个类。
在那之后你可以做你想做的事情。

document.addEventListener('DOMContentLoaded', function() {

    let div_line = document.getElementsByClassName('myColor');

    for(i = 0; i < div_line.length; i++) {
        if(i <= 4){
            let newLine = div_line[i] ;
            newLine.style.backgroundColor = 'blue';
        }
        if(i >= 4 && i < 8){
            let newLine = div_line[i] ;
            newLine.style.backgroundColor = 'red';
        }
        console.log(div_line.lenght);
        console.log(i)
    }

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="scripts.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div class="myColor holder col-md-3"><div class="block_content">1</div></div>
        <div class="myColor holder col-md-3"><div class="block_content">2</div></div>
        <div class="myColor holder col-md-3"><div class="block_content">3</div></div>
        <div class="myColor holder col-md-3"><div class="block_content">4</div></div>
        :
        :
        <div class="myColor holder col-md-3"><div class="block_content">20</div></div>
    </div>
</body>
</html>

不要忘记重复脚本，继续到20行。
你可以删除我的console.log，这是测试用的。

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

weylhg0b2#

好的，你可以用它来表示不同的列颜色。

style="background-color: #4e3836;"

如何在代码中做到这一点？下面是一个示例。

<div class="holder col-md-3" style="background-color: #4e3836;"><div class="block_content">1</div></div>
<div class="holder col-md-3" style="background-color: #fff;"><div class="block_content">2</div></div>
<div class="holder col-md-3" style="background-color: #00000;"><div class="block_content">3</div></div>
<div class="holder col-md-3" style="background-color: #4e3853;"><div class="block_content">4</div></div>

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

我来回答

Bootstrap 引导CSS col-md换行符上的不同颜色

2条答案

相关问题

热门标签

最新问答