Bootstrap Layout Probleme - kein Spaltenabstand

Ich versuche, eine einfache Dashboard-Seite mit einem Suchformular an der Spitze zu gestalten. Ich kann keinen Weg finden, den Spaltenabstand wie gewünscht zu rendern. Unten ist ein Bild von dem, was ich bisher erreicht habe.Bootstrap Layout Probleme - kein Spaltenabstand

Hier ist der Code I haben:

<body> 

    <nav class="navbar navbar-light bg-faded"> 
     <a class="navbar-brand" href="#">Bootstrap Is Hard</a> 
     <div id="user"> 
      <form id="form-login" class="form-inline pull-xs-right"> 
       <div class="form-group"> 
        <label for="username">Username</label> 
        <input id="username" type="text" class="form-control"></input> 
       </div> 
       <div class="form-group"> 
        <label for="password">Password</label> 
        <input id="password" type="password" class="form-control"></input> 
       </div> 
       <button id="btn-login" type="button" class="btn btn-primary">Login</button> 
      </form> 
     </div> 
    </nav> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="form-group"> 
        <label for="sel-city" class="col-xs-2 col-form-label">City</label> 
        <div class="col-xs-10"> 
         <select id="sel-city" class="form-control"></select> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12"> 
       <div class="input-group"> 
        <input type="text" class="form-control" id="txt-earch" placeholder="Restaurant name..."> 
        <span class="input-group-btn"> 
         <button id="btn-search" class="btn btn-primary" type="button">Search</button> 
        </span> 
       </div> 
      </div> 
     </div> 

     <div class="row" style="height: 100%;"> 
      <div class="col-md-8" style="height: 100%;"> 
       <div id="map"></div> 
      </div> 
      <div class="col-md-4" style="height: 100%;"> 
       <ul id="list-establishments" class="list-group"></ul> 
      </div> 
     </div> 

    </div> 

</body> <!-- end container -->

I Polsterung um Eingangsformelemente ausgerichtet haben möchte.

Quelle

2016-08-02 MoreScratch

Basierend auf Ihrer Frage ist es schwer zu wissen, was genau Sie erreichen möchten.

Aber basierend auf meinem Verständnis hinzufügen, warum nicht Ihre eigene style.css und setzen in so etwas wie:

.form-group { 
    padding-right: 20px; 
}

Quelle

2016-08-02 01:50:16

Was ich versuche, ist eine ansprechende Layout mit ausgerichteten Eingabeelementen zu erreichen, die Abstände zwischen ihnen. Um genau zu sein, möchte ich in dem angehängten Bild den Abstand zwischen den Eingabeelementen (d. H. Stadtauswahl, Suchfeld) und brauche, dass die Stadtauswahl mit der Suche und der Karte ausgerichtet ist (d. H. Dieselbe Breite wie). Tut mir leid, dass ich nicht klarer bin. – MoreScratch

Fügen Sie für width einfach die Eigenschaft 'width: X%' zu den Elementen hinzu, die übereinstimmen sollen. Was das vertikale Padding anbelangt, wird meine obige Antwort gut funktionieren. Ändern Sie einfach "padding-right" zu "padding-bottom". –

Also gibt es im Bootstrap keine oberen oder unteren Ränder für Zeilen oder Spalten? Das scheint etwas merkwürdig. – MoreScratch

Was die Dokumentation für Forms gehen, sieht es aus wie Sie die row Klasse zu Ihrem hinzufügen müssen form-group während Sie Ihre Spalte (n) in die form-group/row Div. Sie sollten jetzt keine separate Reihe um diese herum benötigen.

Beispiel Markup:

<div class="form-group row">

Sie sollten auch die neueste Alpha.3 Release verwenden (wenn Sie nicht allready sind), da einige Probleme mit Formularen jetzt wie Etikett Polsterung befestigt sind. Alpha.3 Release Highlights. Und bedenke, dass es weitere Änderungen geben wird, da dies noch in der Alpha-Version ist.

Arbeitsbeispiel:

var map; 
 
map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
    lat: -34.397, 
 
    lng: 150.644 
 
    }, 
 
    zoom: 8 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 35rem; 
 
    width: 100%; 
 
} 
 
.navbar { 
 
    margin-bottom: 1rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-light bg-faded"> 
 
    <a class="navbar-brand" href="#">Bootstrap Is Hard</a> 
 

 
    <div id="user"> 
 
    <form id="form-login" class="form-inline pull-xs-right"> 
 
     <label for="username">Username</label> 
 
     <input id="username" type="text" class="form-control"> 
 
     <label for="password">Password</label> 
 
     <input id="password" type="password" class="form-control"> 
 
     <button id="btn-login" type="button" class="btn btn-primary">Login</button> 
 
    </form> 
 
    </div> 
 

 
</nav> 
 

 
<div class="container"> 
 

 
    <form> 
 
    <div class="form-group row"> 
 
     <label for="sel-city" class="col-xs-2 col-form-label">City</label> 
 
     <div class="col-xs-10"> 
 
     <select id="sel-city" class="form-control"></select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <div class="col-xs-12"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" id="txt-earch" placeholder="Restaurant name..."> 
 
      <span class="input-group-btn"> 
 
      <button id="btn-search" class="btn btn-primary" type="button">Search</button> 
 
     </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div id="map"></div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <ul id="list-establishments" class="list-group"></ul> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script>

Quelle

2016-08-02 03:12:41 vanburen

Bootstrap Layout Probleme - kein Spaltenabstand

Antwort

Verwandte Themen