如何更改引导标签和输入之间的距离 [英] how to change the distance between bootsrap label and input

问题描述

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

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

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

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

这是一个小提琴，显示了我希望 City/St/Zipcode 如何内联小提琴

<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="欧洲/尼科西亚">欧洲/尼科西亚</option></选择>

<label class="radio-inline"><input id="timeformat-0" name="timeformat" value="24" type="radio"/>19:00<label class="radio-inline"><input checked id="timeformat-1" name="timeformat" value="12" type="radio"/>下午7时00<button class="btn" type="submit">保存</button></表单>

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

解决方案

我不太明白你想要什么..

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

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

如果你想要它在右侧，那么添加这个类.

右拉

I am trying to change the distance between the Labels and there inputs(less distance between the 2). I would also like the labels to be right aligned with each other. I have found some examples of what I am looking for but I cant get it to work. Also you will see two sets of "City/St/Zipcode. I want these to be in the same row, everything I am seeing says to use inline-form in the form tag. My question is how can I do that when my entire modal is one form? can you have forms inside of forms for a single submit? here is my modal in a 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>

Here is a fiddle showing how I want the labels to be right aligned and the distance between the label and input 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>

Here is a fiddle showing how I want the City/St/Zipcode to be inline 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>

Update: * = (space) Instead of this Label**********Input. I want this, Label***Input

解决方案

I can not exactly understand what you want..

if you want space b/w the label and input field then add br tag like...

  <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>

if you want it to the right side then add this class.

pull-right

这篇关于如何更改引导标签和输入之间的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！