Bootstrap 4 行中的居中复选框按钮
Centering checkbox buttons in Bootstrap 4 row
我正在尝试将复选框作为 Bootstrap 中的按钮居中。我试过在周围的 div 和输入中使用 "text-center" 和 "center-block" 但没有效果。 (您可以在示例中看到 "text-center" 和 "center-block" 在许多地方的使用。)
HTML:
<div class="row grade-selection">
<div class="col-xs-1"></div>
<div class="col-xs-2 btn-group text-center" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">K</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary text-center">
<input type="checkbox" autocomplete="off">1</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="text-center" type="checkbox" autocomplete="off">2</label>
</div>
<div class="col-xs-2 btn-group center-block" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">3</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary center-block">
<input type="checkbox" autocomplete="off">4</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row grade-selection">
<div class="col-xs-1"></div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="center-block" type="checkbox" autocomplete="off">5</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">6</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">7</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">8</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">9</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row grade-selection">
<div class="col-xs-3"></div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">10</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">11</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">12</label>
</div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
我创建了一个 Fiddle 并用不同的颜色突出显示其中一个 div 的背景,这样您就可以看到没有居中的地方:
https://jsfiddle.net/rovh1fcw/3/
感谢您的帮助!我确定我忽略了一些简单的事情。
div[data-toggle]{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
text-center
class 现在是 Bootstrap 4 alpha 中的 text-xs-center
。同时从您的列中删除 btn-group
,因为这会导致按钮以内联方式显示。
<div class="col-xs-2 text-xs-center" data-toggle="buttons">
<label class="btn btn-primary text-xs-center">
<input type="checkbox" autocomplete="off">1</label>
</div>
我正在尝试将复选框作为 Bootstrap 中的按钮居中。我试过在周围的 div 和输入中使用 "text-center" 和 "center-block" 但没有效果。 (您可以在示例中看到 "text-center" 和 "center-block" 在许多地方的使用。)
HTML:
<div class="row grade-selection">
<div class="col-xs-1"></div>
<div class="col-xs-2 btn-group text-center" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">K</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary text-center">
<input type="checkbox" autocomplete="off">1</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="text-center" type="checkbox" autocomplete="off">2</label>
</div>
<div class="col-xs-2 btn-group center-block" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">3</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary center-block">
<input type="checkbox" autocomplete="off">4</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row grade-selection">
<div class="col-xs-1"></div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="center-block" type="checkbox" autocomplete="off">5</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">6</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">7</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">8</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">9</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row grade-selection">
<div class="col-xs-3"></div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">10</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">11</label>
</div>
<div class="col-xs-2 btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">12</label>
</div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
我创建了一个 Fiddle 并用不同的颜色突出显示其中一个 div 的背景,这样您就可以看到没有居中的地方: https://jsfiddle.net/rovh1fcw/3/
感谢您的帮助!我确定我忽略了一些简单的事情。
div[data-toggle]{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
text-center
class 现在是 Bootstrap 4 alpha 中的 text-xs-center
。同时从您的列中删除 btn-group
,因为这会导致按钮以内联方式显示。
<div class="col-xs-2 text-xs-center" data-toggle="buttons">
<label class="btn btn-primary text-xs-center">
<input type="checkbox" autocomplete="off">1</label>
</div>