【问题标题】:how to change the distance between bootsrap label and input如何更改引导标签和输入之间的距离
【发布时间】:2014-12-21 07:27:47
【问题描述】:

我正在尝试更改标签和输入之间的距离(两者之间的距离更小)。我还希望标签彼此正确对齐。我找到了一些我正在寻找的例子,但我无法让它工作。您还将看到两组“城市/街道/邮政编码。我希望它们位于同一行,我看到的所有内容都说在表单标签中使用内联表单。我的问题是当我的整个modal 是一种形式吗?你可以在表单中包含单个提交的表单吗? 这是我在 plunkr 中的模态
myPlunkr

 <div class="form-group clearfix">
     <label class="col-sm-3 control-label">Name</label>
       <div class="col-sm-9">
         <input ng-model="job.name" type="text" class="form-control input-md">
       </div>
  </div>

这是一个小提琴,展示了我希望标签如何右对齐以及标签和输入之间的距离 fiddle

<div class="form-group">
    <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
        <div class="col-sm-8 col-sm-pad">
            <input class="form-control input-block" name="gender" type="text">                      
         </div>
</div>

这是一个小提琴,展示了我希望如何将 City/St/Zipcode 内联 fiddle

<form class="form-inline" role="form">
 <div class="form-group">
  <label class="sr-only" for="timezone">Timezone</label>
   <select class="form-control" id="timezone" name="timezone">
  <option value="America/St_Lucia">America/St_Lucia</option>
  <option value="Europe/Nicosia">Europe/Nicosia</option>
 </select>
</div>

<label class="radio-inline">
  <input id="timeformat-0" name="timeformat" value="24" type="radio" />
  19:00
</label>

<label class="radio-inline">
 <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
   7:00 PM
</label>

 <button class="btn" type="submit">Save</button>
</form>

更新: * =(空格) 而不是这个标签**********输入。我想要这个,标签***输入

【问题讨论】:

    标签: css twitter-bootstrap-3


    【解决方案1】:

    我不能完全理解你想要什么..

    如果你想要空格 b/w 标签和输入字段,然后添加 br 标签...

      <input id="timeformat-0" name="timeformat" value="24" type="radio" />
      19:00
    </label>
    <br/>
    <label class="radio-inline">
     <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
       7:00 PM
    </label>
    

    如果你想把它放在右边,那么添加这个类。

    pull-right
    

    【讨论】:

    • 我用这个 text-right 解决了标签输入问题
    • 所以现在我需要将 City/St/Zipcode 彼此内联
    猜你喜欢
    • 2021-02-14
    • 1970-01-01
    • 1970-01-01
    • 2020-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多