更广泛的投入

Question

我正在使用Bootstrap 3.2.0，我有以下代码：

<form name="singUpForm" id="singUpForm">

    <div class="top-margin">

        <div class="input-append">
            <label>Contact<span class="text-danger"></span></label>
            <input type="url" class="span2" ng-model="Person.url" required="required">
            <button class="btn" type="button">
                Test
            </button>
            <button class="btn" type="button">
                Ayuda
            </button>
        </div>

        <div class="alert alert-warning" ng-hide='singUpForm.email.$valid' >
            Ingrese una url válida.
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 text-right">
            <button ng-disabled='singUpForm.$invalid' type="submit" class="btn btn-action" ng-click="signUp()">
                Guardar datos
            </button>
        </div>
    </div>
</form>

我想让输入类型=“url”更广泛的traying强制它获取表单内部100％的空间，右边的两个按钮位于同一行。

我需要这样的东西：

Answer 1

使用'form-control'，'row'和'col'

在'xs'屏幕中，您可以在两个列中将类更改为'col-xs-6'

UPDATED DEMO

 <div class="input-append">
            <label>Contact<span class="text-danger"></span></label>
            <div class="row">
                <div class="col-md-10 col-sm-9 col-xs-12 col-lg-10">
                <input type="url" class="form-control" ng-model="Person.url" required="required" />
                    </div>

                <div class="col-md-2 col-sm-3 col-xs-12 col-lg-2">
                    <button class="btn" type="button">
                        Test
                    </button>
                    <button class="btn" type="button">
                        Ayuda
                    </button>
                </div>
            </div>
    </div>

Answer 2

您可以将输入属性设置为特定大小<input size="100">。

Answer 3

您可以申请：

style="width:100%"

在<input>字段中，所以它就像：

<input type="url" class="span2" ng-model="Person.url" required="required" style="width:100%">

或者你可以在CSS中添加它：

.span2{
width: 100%
}

http://jsfiddle.net/sc212f7s/