我对输入组中存在的按钮宽度有疑问。我正在使用Bootstrap 4.0.0-alpha.6(Flexbox)。
这就是我所拥有的。
这就是我想要的。
这是代码。
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
<span class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">Name</a>
<a class="dropdown-item" href="#">Author</a>
<a class="dropdown-item" href="#">NewDark version</a>
<a class="dropdown-item" href="#">Related game</a>
<a class="dropdown-item" href="#">First release date</a>
<a class="dropdown-item" href="#">Last update date</a>
</div>
</div>
</span>
<span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
<span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
</div>
有人知道如何自动修复此按钮的宽度吗?也许有一个特定的Flexbox属性?
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
Bootply代码: http://www.bootply.com/DRLKMrc99S
答案 0 :(得分:1)
我已添加btn-block
和text-left
个类。请参阅similar question。
<div class="container">
<div class="row">
<div class="col">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-search fa-fw"></i></span>
<input class="form-control" placeholder="Just type something..." type="text">
<span class="input-group-addon input-group-addon-clear wdh-4-rem">
<div class="loaded">100</div>
</span>
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
<span class="input-group-btn btn-block">
<div class="btn-group btn-block">
<button type="button" class="btn btn-secondary btn-block dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
<div class="dropdown-menu btn-block">
<a class="dropdown-item active" href="#">Name</a>
<a class="dropdown-item" href="#">Author</a>
<a class="dropdown-item" href="#">NewDark version</a>
<a class="dropdown-item" href="#">Related game</a>
<a class="dropdown-item" href="#">First release date</a>
<a class="dropdown-item" href="#">Last update date</a>
</div>
</div>
</span>
<span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
<span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
</div>
</div>
</div>
</div>