0

Bootstrap3: A linebreak within a label prevents that the next column takes its expected place in layout. This happens just in md-layout.

sm-Layout: enter image description here

md-Layout with linebreak within label. I want the "PLZ and Ort"-Input at the same place as it is in the sm-Layout.enter image description here md-Layout without linebreak within label. Everything is fine. enter image description here

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>
Phantom
  • 638
  • 1
  • 7
  • 18

1 Answers1

0

Your bootstrap structure is not correct. Use the following structure

I have added missing row class on various elements. It should work as you expect.

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

Link to fiddle

Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
  • Thank you very much for your answer? I know that the additional row classes solve the problem. But I would like to know the reason which css property causes the layout working in sm-layout and not working in md-layout. Adding the addional row classes is complicated, because the code is generated with a function. – Phantom Jul 11 '18 at 13:03
  • https://stackoverflow.com/questions/22310912/bootstrap-row-with-columns-of-different-height See the top rated answer in this, its the same issue as yours and use the first approach if you can. Additionally can you show the code that generates this html, may be i can help update that function properly – Nandita Sharma Jul 11 '18 at 13:14