我根据屏幕大小使用不同的列数,并让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>
1条答案
按热度按时间mi7gmzs61#
您所需要做的就是手动定义9列桌面情况下的列宽。但是您也可以在.col-上使用断点。请注意,在您的示例中,构造“col-sm-6 col-6”没有意义,并且等同于“col-6"。我将css样式应用于。col标记,但您可以创建唯一类或id。
第一个