标签旁边的输入答案

【问题标题】：Input next to the label标签旁边的输入
【发布时间】：2017-11-23 18:44:39
【问题描述】：

我目前正在使用引导程序，我正在努力让输入坐在标签旁边。

这是 HTML：

        <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">
                <div class="form-group">
                  <label class="control-label" for="year">Year</label>
                  <input name="site" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18">
                  </div>

                <strong>Payment Times: </strong> <div class="input-group col-md-2">
                  <input type="text" class="form-control" placeholder="Monthly" aria-describedby="basic-addon1" readonly="readonly">
                </div>
                <br></br>
                <strong>Payment Type: </strong> Direct Debit
            </div>

          </div>            
        </div>

这是当前外观的图片：Imgur Image

【问题讨论】：

标签： html css twitter-bootstrap input label

【解决方案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">

【讨论】：

【解决方案2】：

试用 Bootstraps form-horizontal-class。你会像这样使用它：

<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 以获取其他示例。

【讨论】：

【解决方案3】：

使用没有类的标签。删除控制标签

【讨论】：