Question

我尝试使用自定义水平装订线连续放置4个元素，我尝试将col-md-2类的每个元素放置在col中以确保特定的屏幕尺寸，并修改我需要的每个元素..但是看起来并不好，当应用col-md-3时显然没有空间为每个元素添加边距，令人惊讶的是，当我尝试应用col-md-2.5类时，它在大屏幕上工作，但是，当我想在较小的屏幕上将元素跨度扩展到10列时，它确实可以，但是当我回到较大的屏幕时，它的行为又像小屏幕一样，这是我的HTML代码，我将在下面留下屏幕截图，以说明我想要的行为。

[class^="col"]:not(:last-child){
    margin-right: 60px;
  }

<div class="container">
    <div class="row">
        <div class="col col-md-2.5">1</div>
        <div class="col col-md-2.5">2</div>
        <div class="col col-md-2.5">3</div>
        <div class="col col-md-2.5">4</div>
    </div>
</div>

<!--I know it may look weird but this above HTML along with the CSS 
achieved my goal on the big screens -->

<!-- things get messy again when i do the following to adjust the 
view of elements on smaller screens -->

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

<!-- it works fine in small screen, but when I back to big 
screens with this set up, it doesn't give me the initial 
behavior and spans every element to columns !!

以下是所需行为的屏幕截图

提前谢谢！

Answer 1

我不太明白你的问题。您是否刚刚尝试使用{property}{sides}-{breakpoint}-{size}表示法在4列的左侧和右侧简单地应用填充？

https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

这样，您就不必在列上使用offset。相反，您可以只使用col。

例如，如果您只想在大屏幕上增加左右填充，则可以在px-lg-5类上应用col。

<div class="container">
    <div class="row">
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
    </div>
</div>

jsfiddle： http://jsfiddle.net/aq9Laaew/241204/

Answer 2

您缺少目标屏幕：

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

将任意大小：xs，sm，md，lg添加到col和偏移量，如下所示：

<div class="container">
    <div class="row">
        <div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
    </div>
</div>

这里是参考： https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

编辑：使用偏移类时，您似乎必须指定要定位的屏幕。但是，您不需要其他选择是正确的。

bootstrap 4 Grid，使用自定义水平装订线连续放置4个元素

2 个答案: