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);

Answer 2

如果您使用bootstrap，这不起作用吗？

＆＃13;

<button type="button" class="btn btn-primary btn-lg btn-block" >Block level button</button>

＆＃13;

创建一个按钮，其容器的宽度为。

http://getbootstrap.com/css/#buttons-sizes

菲尔

按钮全宽，Bootstrap3

2 个答案: