标签在左侧而不是在输入字段上方 [英] Label on the left side instead above an input field

问题描述

我希望标签不在输入字段上方，而是在左侧.

<div class="form-group"><label for="rg-from">Ab:</label><input type="text" id="rg-from" name="rg-from" value="" class="form-control">

<div class="form-group"><label for="rg-to">Bis: </label><input type="text" id="rg-to" name="rg-to" value="" class="form-control">

<div class="form-group"><input type="button" value="Clear" class="btn btn-default btn-clear"><input type="submit" value="输了！"class="btn btn-primary">

</表单>

这段代码给了我:

我想要:

解决方案

您可以为每个表单组使用表单内联类:)

<div class="form-group form-inline"><label for="exampleInputEmail1">电子邮件地址</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

</表单>

I would like to have the labels not above the input field, but on the left side.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

This code gives me:

I would like to have:

解决方案

You can use form-inline class for each form-group :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

这篇关于标签在左侧而不是在输入字段上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！