将标签放在输入表单旁边

Posted 2023-03-14

【中文标题】将标签放在输入表单旁边

【英文标题】：Put label next to input form

【发布时间】：2014-05-26 21:48:49

【问题描述】：

我正在使用 bootstrap 和 laravel (blade) 作为后端，无法在 jdfiddle 中上传我的代码以显示。但问题是标签离输入框很远，有办法把它放在它旁边的中心吗？

<div class="row">
          Form::open(array('url' => 'bassengweb/insertHV', 'method' => 'POST')) 
                <div class="col-md-6">
                    <div class="form-group">


    <label class="col-md-6 col-lg-6 control-label">Dato: </label>
                    <div class="col-md-6 col-lg-6">
                       Form::text('Date', $date, array('class' => 'form-control')) 
                    </div>
                </div>
            </div>

    <div class="col-md-6 text-left-imp"> 


                <div class="form-group">
                    <label class="col-md-6 col-lg-6 control-label">Tid: </label>
                    <div class="col-md-6 col-lg-6">
                       Form::text('Time', $time, array('class' => 'form-control')) 
                    </div>
                </div>


    </div>
    </div>

【问题讨论】：

这是一个很好的例子，说明引导程序如何使事情变得比他们需要的复杂得多。

在 html 表单中使用字段集（图例）对小部件进行分组。它看起来比 'div'、imo 更好，并且屏幕阅读器可以理解它。 p.s.我也在表单之外使用“fieldset”来对小部件进行分组。

【参考方案1】：

您的标签具有 col-md-6 类，这将使它们变得相当宽。我会尝试以下任何一种方法：

使用较小的标签列，可能是col-md-3 在标签内使用text-align: right 将它们推送到输入旁边 尝试使用form-inline 或form-horizontal，看看它是否能满足您的需求

这是API sample 中用于form-horizontal 类的标记（注意元素的排列方式）：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>