Question

如何在不分别调整每个按钮宽度的情况下，将自举式自展按钮设为100％宽度？

例如，如果我有8个按钮，100％容器宽度/ 8个按钮=每个按钮宽度为12％。

我想：

避免指定每个按钮的宽度（今天我明天有8个。）有20）。
将整个.btn-group的子按钮调整到中心位置（如果你密切注意，你会看到容器内的按钮由于某种原因左对齐）。

.btn-group {
  width: 100%;
}
.btn-group>input.btn {
  width: 12%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container panel panel-default">
  <div class="btn-group">
    <input type="button" class="btn btn-primary btn-responsive" value="A" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
  </div>

  <br/>
  <br/>
  <br/>

  <p>the buttons above don't take full width of the container</p>
</div>

CSS示例：

.btn-group {
  width: 100%;
}

.btn-group>input.btn {
  width: 12%;
}

Codepen

Answer 1

使用flexbox最容易实现这种效果。

.btn-group {
  display: flex;
  justify-content: center;
}

.btn-group > input.btn {
  flex-grow: 1;
}

根据您定位的浏览器，您可能需要前缀

Answer 2

HTML在网格中添加.row，可让您达到100％。不，我在.col-xs-12内添加了.row这可能没有必要，但我试图遵循bootstrap给出的容器，即容器＆gt;行＆gt;列。

添加..让.btn-group也成为.btn-block，它会100％覆盖。

<div class="container panel panel-default">
  <div class="row">
    <div class="col-xs-12 no-padding">


     <div class="btn-group btn-block my-btn-group">
            <input type="button" class="btn btn-primary btn-responsive" value="A"/>
            <input type="button" class="btn btn-primary btn-responsive" value="AB"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCDE"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
            <input type="button" class="btn btn-primary btn-responsive" value="AB"/>
    </div>
  </div>
        </div>
  <br/>
  <br/>
  <br/>

  <p>the buttons above don't take full width of the container</p>
</div>

CSS：我已经删除了＆＃39;列中的填充＆＃39;并从按钮组按钮组中删除边距

.btn-group>input.btn {
  width:12.5%;
}

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;  
}

.my-btn-group .btn+.btn {
  margin-left: 0px;
}

Answer 3

如果使用Flexbox不是您的用例的最佳选择，那么您可以使用table布局。另一个优点是您对响应行为的控制，因为默认btn-group在这方面没有提供太多。

这些元素的行为类似于<table＆gt; HTML元素。它定义了一个块级框。

基本示例： 使用FullPage运行

/*Basic Rules*/

.panel-btn {
  width: 100%;
  display: table;
}
.panel-btn div {
  display: table-cell;
}
.panel-btn div .btn {
  float: none;
  width: 100%;
  border-radius: 0;
}
/*Rounded Corner Rules*/

.panel-btn div:first-of-type .btn {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

  <h2>11 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-primary" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="123" />
    </div>
  </div>

</div>

响应示例： 使用FullPage运行并缩小浏览器窗口

/*Basic Rules*/

.panel-btn {
  width: 100%;
  display: table;
}
.panel-btn div {
  display: table-cell;
}
.panel-btn div .btn {
  float: none;
  width: 100%;
  border-radius: 0;
}
/*Rounded Corner Rules*/

.panel-btn div:first-of-type .btn {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
/*Responsive CSS*/

@media screen and (max-width: 850px) {
  .panel-btn div {
    width: 50%;
  }
  .panel-btn div:nth-child(even) {
    float: right;
  }
  .panel-btn div:nth-child(odd) {
    float: left;
  }
  .panel-btn div:last-child:not(:nth-child(even)) {
    width: 100%;
    display: block;
  }
  /*Rounded Corner Rules*/
  .panel-btn div:first-of-type .btn {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 4px;
  }
  .panel-btn div:nth-child(2) .btn {
    border-top-right-radius: 4px;
  }
  .panel-btn div:last-of-type .btn {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 0px;
  }
  .panel-btn div:last-child:not(:nth-child(even)) .btn {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .panel-btn div:nth-last-child(2):not(:nth-child(even)) .btn {
    border-bottom-left-radius: 4px;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">

  <h2>11 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-primary" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="123" />
    </div>
  </div>

  <br/>

  <h2>10 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-danger" value="123456789" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12345678" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1234567" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="123456" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12345" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1234" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="123" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="A" />
    </div>
  </div>

  <br/>

  <h2>9 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-success" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="1" />
    </div>
  </div>

  <br/>

  <h2>20 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-warning" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="2" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="3" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="4" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="5" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="6" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="7" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="8" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="9" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="10" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="11" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="13" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="14" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="15" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="16" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="17" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="18" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="19" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="20" />
    </div>
  </div>

</div>

将Bootstrap的按钮传播到100％的包含div

3 个答案: