制作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中,或者如果你想通过响应使用百分比值。