html垂直边距,html – Styling Bootstrap的btn-group-justified,添加边距和垂直尺寸

HTML

Option 1

Option 2

Option 3

CSS

.blocks .btn-primary

{

padding: 24px 12px;

margin: 0 5px;

border-radius: 0;

}

将看起来像：

If I apply btn-group-justified class instead of just btn-group,they

became justified but still not square-shaped,nor they have margin

between them

我不认为btn组合理的类将意图使用没有btn组.虽然在不使用btn-group时似乎并没有什么不同.

现在你有html：

Option 1

Option 2

Option 3

CSS：

.blocks .btn-primary

{

padding: 24px 12px;

border-radius: 0;

}

.blocks {border-spacing:5px;}

这将是：

请注意,您有矩形而不是正方形. btn-group-justified将该组的总数设置为其父级的100％.要制作正方形,您需要使用jQuery来根据按钮的(内部)宽度设置高度. (见：CSS scale height to match width – possibly with a formfactor)

$(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth());

$(window).resize(function(){ $(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); });