Bootstrap 9列网格仅适用于大屏幕

nom7f22z  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(167)

我根据屏幕大小使用不同的列数,并让Bootstrap Package 超过12列的行。但是对于大屏幕和更大的屏幕,我希望每行有9列。
起初我想以编程方式每9列添加一个偏移量,但后来它打破了其他大小:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid">
    <div class="row text-center">
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item1</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item2</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item3</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item4</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item5</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item6</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item7</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item8</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item9</div>
        <div class="offset-lg-3"></div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item10</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item11</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item12</div>
        <div class="col-lg-1 col-md-3 col-sm-6 col-6">Item13</div>
    </div>
</div>
mi7gmzs6

mi7gmzs61#

您所需要做的就是手动定义9列桌面情况下的列宽。但是您也可以在.col-上使用断点。请注意,在您的示例中,构造“col-sm-6 col-6”没有意义,并且等同于“col-6"。我将css样式应用于。col标记,但您可以创建唯一类或id
第一个

相关问题