html - 全 Angular 按钮，Bootstrap3

Question

这是我的HTML

<div id="formSuscription">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="First Name">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Last Name">
        </div>
        <div class="form-group">
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group ">
            <input type="button" class="form-control" value="Submit">
        </div>
        <div class="clearfix"></div>
        <center>
            <div class="form-group">
                <label>
                    <input type="checkbox" class="form-control" value="Submit"> DON'T SHOW AGAIN
                </label>
            </div>
        </center>
    </form>
</div>

图片:https://www.dropbox.com/s/mpa7rybvpngf19z/ohnails.png 由于我的声誉，我无法发布图片

如何让按钮全宽？

我试过:

style: display: block; width: 100%;

和

class btn-block

和

<div class="form-group btn-group-justified">
<input class="form-control btn-block" type="button" style="display: block; width: 100%;" value="Submit">
</div>

但不工作

Answer 1

您可以覆盖当前的 css通过添加 id="submit"到 <button>标记并使用 css改变它的宽度。

您的示例:http://jsfiddle.net/urahara/b64yf2jm/2/

你可以静态地做:

编辑这个:

<input id="submit" type="button" class="form-control" value="Submit">

使用 CSS:

#submit{
   width:180px; // <-- Your width value
}

或使用 css动态通过 jQuery :

这里我们所做的是分配 #submit按钮 width与 witdh表单上的其他字段。 (我添加了 +8 来补偿填充或边距，稍微调整一下)

jQuery:

$('#submit').css('width', $('.form-control').width()+8);