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

发布时间：2020-12-14 18:58:12 所属栏目：资源来源：网络整理

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

我想使用无线电输入字段( http://getbootstrap.com/javascript/#buttons-examples)对原始Bootstrap的btn-group进行调整.

原来的样式如下所示：

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

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

<div class="btn-group-justified category-select" data-toggle="buttons">
  <div class="btn-container">
    <label class="btn category category-one">
      <input type="radio" name="options" id="option1"> One
    </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-two">
      <input type="radio" name="options" id="option2"> Two
    </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-three">
      <input type="radio" name="options" id="option3"> Three
    </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-four">
      <input type="radio" name="options" id="option4"> Four
    </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-five">
      <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个按钮,水平对齐,响应(所有浏览器大小都是正方形),并且像一个单选按钮组.

解决方法

HTML

<div class="container"> 
<div class="btn-group blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <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 class="container"> 
<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <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()); });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!