Question

他们已经齐心协力，但标签却被卡住了＃39;在页面上。我尝试使用＆＃39; margin-left＆＃39;但后来他扭曲了其他一切。

enter image description here

我希望结果如下：

enter image description here

以下是我的代码：

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

Answer 1

问题是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>

根据浏览器的大小，为同一元素呈现不同的设计。希望这可以为您提供一些见解，但您可以自行决定如何制定您的网站/应用程序。

Answer 2

将<label class="col-md-4 control-label"></label>更改为

<div class="col-md-4">
  <label class="control-label"></label>
</div>

Answer 3

使用style =“margin-left：15px;”有标签，工作正常，我已经测试过

我的'control-label'超出了'form-group'（bootstrap 3）的自动边距

3 个答案: