制作button变成全angular?
我想要一个button占据整个列的宽度,但有困难…
<div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div>
如何使button与列一样宽?
Bootstrap v2
在button/元素上使用input-block-level
类
Bootstrap v3和v4
在button/元素上使用btn-block
类
为什么不使用Bootstrap预定义的类input-block-level
来完成这项工作?
<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 --> <a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 --> <!-- And let's join both for BS# :) --> <a href="#" class="btn input-block-level form-control">Full-Width Button</a>
在Control Sizing ^部分中了解更多信息。
使用
<div class="btn-group btn-group-justified"> ... </div>
但它只适用于<a>元素而不是<button>元素。
请参阅: http : //getbootstrap.com/components/#btn-groups-justified
您应该将这些样式添加到CSS工作表
div .no-padding { padding:0; } button .full-width{ width:100%; //display:block; //only if you're having issues }
然后更改添加类到您的代码
<div class="span9 btn-block no-padding"> <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button> </div>
我没有testing过这个,我不是100%确定你想要什么,但我认为这会让你接近。
我只是用这个:
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" class="btn btn-primary btn-lg btn-block">Sign In</button> </div>
我会认为这将是最自负的做事方式:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
我正在做的是将类col-xs-12
到button。
<div class="col-md-9"> <button class="btn btn-block btn-primary" type="button">Block level button</button> </div>
在Bootstrap 3中,这应该是你所需要的。 我相信btn-large
覆盖了btn-block
的宽度。
button的宽度由button文本定义。 所以,如果你想定义button的宽度,你可以使用一个定义的宽度通过使用像素在CSS中,或者如果你想通过响应使用百分比值。