Question

我现在正在使用引导程序而且我很难将输入放在标签旁边。

这是HTML：

skip_files

以下是目前的展示形式：Imgur Image

Answer 1

要么使用它：

<label class="control-label" for="year">Year</label>
<input name="site" style="width:calc(***'initial', '100%', or specific amount*** - 4em);" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18">

或者这个：

<label class="control-label" style="display:inline-block;width:calc(100% - ***PIXEL AMOUNT HERE***px);" for="year">Year</label>
<input name="site" style="width:calc(100% - ***PIXEL AMOUNT HERE***px);" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18">

Answer 2

尝试Bootstraps form-horizontal - 课程。您可以使用它：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
    <h1>Title</h1>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Title Info</h3>
                    <a href="#">
                        <button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
                    </a>
                </div>

                <div class="panel-body">
                    <form class="form-horizontal">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="year" class="control-label col-xs-3">Year:</label>
                                    <div class="col-xs-9">
                                        <input name="site" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">Payment Times:</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control" placeholder="Monthly" aria-describedby="basic-addon1" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <br/>
                <br/>
                <strong>Payment Type: </strong> Direct Debit
            </div>
        </div>
    </div>

查看其他示例here。

Answer 3

使用不带类的标签。删除控制标签

在标签旁边输入

3 个答案: