Question

Bootstrap3：标签内的换行符可防止下一列在布局中占据其应有的位置。这仅发生在md-layout中。

sm布局：

md-Layout，标签内有换行符。我希望“ PLZ和Ort”输入与sm布局中的位置相同。标签内没有换行符的md-Layout。一切都好。

JSFiddle：https://jsfiddle.net/Phantomias/q1kvsh5w/8/

<div class="container">
    <form id="form_settings" class="form-horizontal">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Inhaberdaten
                    </div>
                    <div class="panel-body">
                        <fieldset>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_name" class="form-group required">
                                    <div class="col-xs-12 col-sm-4 col-md-4">
                                        <label class="control-label" for="name" style="">Vor- und Nachname</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[name]" id="name" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_strasse" class="form-group required">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="strasse" style="">Straße und Nr.</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[strasse]" id="strasse" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_ort" class="form-group required">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="ort" style="">PLZ und Ort</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[ort]" id="ort" type="text">
                                    </div>
                                </div>
                                </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_shopname" class="form-group">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="shopname" style="">Palundu-Shopname</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[shopname]" id="shopname" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_telefon" class="form-group required">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="telefon" style="">Telefon</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[telefon]" id="telefon" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_fax" class="form-group">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="fax" style="">Fax</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[fax]" id="fax" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div id="div_email" class="form-group required">
                                    <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                                        <label class="control-label" for="email" style="">E-Mail</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8">
                                        <input class="form-control" name="inh_daten[email]" id="email" type="text">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

您的引导程序结构不正确。使用以下结构

我在各种元素上添加了缺少的行类。它应该可以按您期望的那样工作。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class="container">
  <form id="form_settings" class="form-horizontal">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-primary">
          <div class="panel-heading">
            Inhaberdaten
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-sm-6 col-md-6">
                <div id="div_name" class="form-group required row">
                  <div class="col-xs-12 col-sm-4 col-md-4">
                    <label class="control-label" for="name" style="">Vor- und Nachname</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[name]" id="name" type="text">
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-md-6">
                <div id="div_strasse" class="form-group required row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="strasse" style="">Straße und Nr.</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[strasse]" id="strasse" type="text">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-md-6">
                <div id="div_ort" class="form-group required row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="ort" style="">PLZ und Ort</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[ort]" id="ort" type="text">
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-md-6">
                <div id="div_shopname" class="form-group row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="shopname" style="">Palundu-Shopname</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[shopname]" id="shopname" type="text">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-md-6">
                <div id="div_telefon" class="form-group required row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="telefon" style="">Telefon</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[telefon]" id="telefon" type="text">
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-md-6">
                <div id="div_fax" class="form-group row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="fax" style="">Fax</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[fax]" id="fax" type="text">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-md-6">
                <div id="div_email" class="form-group required row">
                  <div class="col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
                    <label class="control-label" for="email" style="">E-Mail</label>
                  </div>
                  <div class="col-xs-12 col-sm-8 col-md-8">
                    <input class="form-control" name="inh_daten[email]" id="email" type="text">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

链接到fiddle

Bootstrap3：标签内的换行符弄乱了列的布局

1 个答案: