我的'control-label'超出了'form-group'（bootstrap 3）的自动边距
他们已经齐心协力，但标签却被卡住了＃39;在页面上。 我尝试使用＆＃39; margin-left＆＃39;但后来他扭曲了其他一切。
我希望结果如下：
以下是我的代码：
http://jsfiddle.net/vzm7et7z/1/
HTML：
<div class="container">
<div class="row">
<div class="col-md-8">
<form id="form-sms" class="form-horizontal" method="post" action="salva.php">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="operadora">OPERADORA</label>
<div class="col-md-8">
<select id="operadora" name="operadora" class="form-control">
<option value="">Selecione uma operadora</option>
<option value="CLARO">Claro</option>
<option value="CTBC">CTBC</option>
<option value="OI">Oi</option>
<option value="NEXTEL">Nextel</option>
<option value="TIM">TIM</option>
<option value="VIVO">Vivo</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_destinatario">DESTINATÁRIO</label>
<div class="col-md-4">
<select id="ddd_destinatario" name="campoDDD_d" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_destinatario" name="campoCEL_d" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="nome">SEU NOME</label>
<div class="col-md-8">
<input id="nome" name="nome" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_remetente">SEU NÚMERO</label>
<div class="col-md-4">
<select id="ddd_remetente" name="campoDDD_r" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_remetente" name="campoCEL_r" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="campoSMS">MENSAGEM</label>
<div class="col-md-8 control-zero">
<textarea name="campoSMS" id="campoSMS" class="form-control textarea-sms" maxlength="100"></textarea>
<p class="help-block textarea-contagem"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-4 control-zero">
<button id="enviar" name="enviar" class="btn btn-enviar">ENVIAR!</button>
</div>
</div>
</fieldset>
</form>
</div>
CSS：
.form-horizontal .control-label{
/* text-align:right; */
height: 34px;
text-align:left;
background: #A0D468;
font-size: 16px;
}
.btn-form {
padding: 0;
}
.btn-enviar {
background: #8e44ad;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
.btn-enviar:hover {
background: #BE90D4;
color: #ffffff;
}
3 个答案:
答案 0 :(得分：0)
问题是Bootstrap CSS的列结构。现在，你有：
<label class="col-md-4 control-label"></label>
<div class="col-md-8"></div>
这为完整视图提供了完美的col-md-12。当你缩小它时，它不知道如何处理溢出，这就是为什么第一个col-md-4出现在输入上方的错误位置。您将要查看visibile-sm, visible-xs, hidden-md类Bootstrap类，并为较小的设备设计单独的布局。例如：
<div class="hidden-md hidden-lg">
<div class="row">
<div class="col-sm-12 col-xs-12">
<label>Example:</label>
</div>
<div class="col-sm-12 col-xs-12">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
<div class="hidden-sm hidden-xs">
<div class="row">
<div class="col-md-4 col-lg-4">
<label>Example:</label>
</div>
<div class="col=md-8 col-lg-8">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
根据浏览器的大小，为同一元素呈现不同的设计。希望这可以为您提供一些见解，但您可以自行决定如何制定您的网站/应用程序。
答案 1 :(得分：0)
将<label class="col-md-4 control-label"></label>更改为
<div class="col-md-4">
<label class="control-label"></label>
</div>
答案 2 :(得分：-1)
使用style =“margin-left：15px;”有标签，工作正常，我已经测试过
相关问题
- <p>文本从.input-group .form-control容器中流出但不在jsFiddle </p>中
- 控制标签的目的是什么？
- 我的'control-label'超出了'form-group'（bootstrap 3）的自动边距
- bootstrap form-group control-label missplaced
- Bootstrap的.row margin-left：-15px - 为什么它缩进（来自文档）
- 表格组边距已删除
- 将Bootstrap模态标签放在控件的左侧
- Boostrap - 形式为内联，左侧为标签，右侧为输入
- Boostrap表单控件类不是wordwraping标签
- 标签和表单组之间的空间太大
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？