html加边距,html-引导程序：在列之间添加边距/填充空间

html-引导程序：在列之间添加边距/填充空间

我正在尝试在Bootstrap网格布局的列之间放置一些额外的边距/填充空间。 我已经尝试过了，但是我不喜欢这个结果。 这是我的代码：

Widget 1

Widget 2

我想添加margin: 10px和padding:10px。有人建议将其类别更改为pull-left和pull-right，但它们之间的差距太大。

14个解决方案

86 votes

只需在col-md-6中添加一个具有所需额外填充的div。 col-md-6是保持列完整性的“主干”，但是您可以在其中添加其他填充。

Widget 1

Widget 2

的CSS

.classWithPad { margin:10px; padding:10px; }

Jon Harding answered 2020-01-05T14:02:11Z

24 votes

更新2018

Bootstrap 4现在具有间距实用程序，该实用程序使添加(或减去)列之间的间距(装订线)更加容易。 不需要额外的CSS。

Widget 1

Widget 2

您可以使用诸如col-*(margin-left：0)，mr-0665(margin-right：0)，2689306604813681681666(.25rem左右边距)等边距工具来调整列内容的边距。

或者，您可以使用填充工具(例如pl-0(padding-left：0)，pr-0(padding-right：0)，px-2(.50rem left＆ 右填充)，等等。

Bootstrap 4列间距演示

笔记

更改col-*的左/右页边距将破坏网格。

更改col-*作品的内容上的左右边距。

更改col-*上的左/右填充也可以。

Zim answered 2020-01-05T14:01:45Z

16 votes

我面临着同样的问题； 以下对我来说效果很好。 希望这可以帮助某人登陆：

Set room heater temperature

Set room heater temperature

这将自动在2个div之间渲染一些空间。

krishna kinnera answered 2020-01-05T14:02:35Z

5 votes

只需添加“ justify-content-around”类。 这会自动在2格之间增加差距。

说明文件：[https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment]

样品：

One of two columns

One of two columns

Madhukar Hiriadka answered 2020-01-05T14:03:04Z

2 votes

您可以如下使用padding和margin速记Bootstrap 4类：

对于超小型设备，例如xs

{property}{sides}-{size}

对于其他设备/视口(小型，中型，大型和超大型)

{property}{sides}-{breakpoint}-{size}

哪里：

property = m for margin and p for padding

以下是方速记含义：

l = defines the left-margin or left-padding

r = defines the right-margin or right-padding

t = defines the top-margin or top-padding

b = defines the bottom-margin or right-padding

x = For setting left and right padding and margins by the single call

y = For setting top and bottom margins

blank = margin and padding for all sides

断点= sm，md，lg和xl。

结合以上所有内容，左侧填充完整代码可以是(例如)：

用于超小型设备中的左填充

PL-2

或中等至超大

pl-md-2

karimeh answered 2020-01-05T14:04:07Z

1 votes

我会在中间保留一个额外的列以用于较大的显示，并在较小的显示上折叠列时将其重置为默认值。 像这样：

Widget 1

Widget 2

thethakuri answered 2020-01-05T14:04:29Z

1 votes

使用flexbox超级简单。 通过将列更改为col-md-5留出一些空间

Widget 1

Widget 2

的CSS

.widgets {

display: flex;

justify-content: space-around;

}

eosimosu answered 2020-01-05T14:04:55Z

0 votes

尝试这个：

Widget 1

Widget 2

omar faruque answered 2020-01-05T14:05:15Z

0 votes

另一方面，如果您想删除列之间的双填充，只需在行内添加类“ nogap”

Widget 1

Widget 2

并为其创建其他CSS类

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}

.nogap > .col:first-child{ padding-left: 15px; }

.nogap > .col:last-child{ padding-right: 15px; }

就是这样，在这里检查：[https://codepen.io/michal-lukasik/pen/xXvoYJ]

mihau answered 2020-01-05T14:05:43Z

0 votes

对于那些希望控制动态列数之间的间距的用户，请尝试：

CSS：

.col:not(:last-child) .inner {

margin: 2px; // Or whatever you want your spacing to be

}

Chris Haines answered 2020-01-05T14:06:08Z

0 votes

我遇到了同样的问题，并通过在bootstrap col内嵌套一个div并添加填充来解决。 就像是：

Your content with padding

Your content with padding

Your content with padding

rinnegan answered 2020-01-05T14:06:30Z

0 votes

当细胞出现背景色时，为像我这样的人提供解决方案

的HTML

a
ba
ba
b

a
b

的CSS

.cssBox {

background-color: red;

margin: 0 10px;

flex-basis: calc(50% - 20px);

}

Mirosław Dróżdż answered 2020-01-05T14:06:58Z

-3 votes

尝试这个：

Set room heater temperature

Set room heater temperature

naha.sunny answered 2020-01-05T14:07:19Z

-12 votes

出于好奇，我还发现

border: 5px solid white

或您喜欢的任何其他变体，使其融入其中，效果都很好。

phenomenon answered 2020-01-05T14:07:43Z