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

概述我想使用无线电输入字段( http://getbootstrap.com/javascript/#buttons-examples)对原始Bootstrap的btn-group进行调整. 原来的样式如下所示： 但是我想让每个按钮都是一个方形按钮,并给他们所有的空格.这样的事情 我正在尝试使用Bootstrap示例中的一些修改后的html标记 <div class="btn-group-justif 我想使用无线电输入字段( http://getbootstrap.com/javascript/#buttons-examples)对原始bootstrap的btn-group进行调整.

原来的样式如下所示：

但是我想让每个按钮都是一个方形按钮,并给他们所有的空格.这样的事情

我正在尝试使用bootstrap示例中的一些修改后的HTML标记

<div  data-toggle="buttons">  <div >    <label >      <input type="radio" name="options" ID="option1"> One    </label>  </div>  <div >    <label >      <input type="radio" name="options" ID="option2"> Two    </label>  </div>  <div >    <label >      <input type="radio" name="options" ID="option3"> Three    </label>  </div>  <div >    <label >      <input type="radio" name="options" ID="option4"> Four    </label>  </div>  <div >    <label >      <input type="radio" name="options" ID="option5"> Five    </label>  </div></div>

和CSS类似的：

[data-toggle="buttons"] .btn>input[type="radio"] {  display: none;}.category-select .btn-container {  position: relative;  wIDth: 19%;  padding-bottom: 19%;  float: left;  height: 0;  margin: 1%;  -moz-Box-sizing:border-Box;  Box-sizing:border-Box;}.btn-container .btn,.btn-container .btn input {  max-wIDth:100%;}

但是当然这个CSS不会像我想要的那样按钮
我想要实现的功能是具有5个按钮,水平对齐,响应(所有浏览器大小都是正方形),并且像一个单选按钮组.

解决方法@H_419_20@ HTML

<div > <div  data-toggle="buttons">  <label >    <input type="radio" name="options" ID="option1"> Option 1  </label>  <label >    <input type="radio" name="options" ID="option2"> Option 2  </label>  <label >    <input type="radio" name="options" ID="option3"> Option 3  </label></div>

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时似乎并没有什么不同.

btn-group-justification将显示设置为表格.要在两个单元格之间添加一个边距,您将需要边框间距代替边距(参见：Why is a div with “display: table-cell;” not affected by margin?)

现在你有HTML：

<div > <div  data-toggle="buttons">  <label >    <input type="radio" name="options" ID="option1"> Option 1  </label>  <label >    <input type="radio" name="options" ID="option2"> Option 2  </label>  <label >    <input type="radio" name="options" ID="option3"> Option 3  </label></div>

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()); });

总结

以上是内存溢出为你收集整理的html – Styling Bootstrap的btn-group-justified,添加边距和垂直尺寸全部内容，希望文章能够帮你解决html – Styling Bootstrap的btn-group-justified,添加边距和垂直尺寸所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。