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

Question

我正在尝试使用自定义水平装订线将 4 个元素连续放置，我尝试将每个元素放在具有 col-md-2 类的列中以用于特定的屏幕尺寸，并修改每个元素的边距满足我的需要..但它看起来不是很好，当应用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。

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

<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

编辑：看起来您可能必须在使用偏移类时指定要定位的屏幕。但是，您不需要其他选项是正确的。