Aktivieren Sie die Kontrollkästchen und Eingabefelder in der Suchleiste

Ich versuche, eine Suchleiste, wo ein grünes div in der Mitte der grauen wäre (siehe http://codepen.io/anon/pen/LRBEvq?editors=1100), Kontrollkästchen, Drop-Menü und Eingabefeld alle Inline mit zwei Knöpfen - also alles in der gleichen Reihe. Ich benutze Bootstrap, um es reaktionsfähig zu machen, bin aber steckengeblieben und kann es nicht herausfinden. Danke für die Hilfe!Aktivieren Sie die Kontrollkästchen und Eingabefelder in der Suchleiste

Hier ist mein html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<body> 
    <div class="container"> 
    <div class="main"> 
     <div class="formContainer"> 
     <div class="col-md-12">Lorem lorem lorem 
      <div class="pull-right">Ipsum lorem ipsum</div> 
     </div> 
     <div class="row mainContent"> 
      <!-- mainContent --> 
      <div class="col-md-7"> 
      <!-- main content --> 

      <div class="checkbox"> 
       <span class="choice-details"> 
             <label class="checkbox-inline"> 
              <input type="checkbox" value="" checked>Lorem 
              </label> 
              <label class="checkbox-inline"> 
              <input type="checkbox" value="">Ipsum 
             </label> 
            </span> 
      </div> 
      <div class="choice-select"> 
       <select class="form-control"> 
            <option value="one">One</option> 
            <option value="two">Two</option> 
            <option value="three">Three</option> 
            <option value="four">Four</option> 
            <option value="five">Five</option> 
           </select> 
      </div> 
      <div class="choice-input"> 
       <input type="text" placeholder="Placeholder text"> 
      </div> 


      </div> 
      <div class="col-md-5"> 
      <button>Lorem ipsum lorem</button> 
      <button>Lorem lorem lorem</button> 
      </div> 
      <!-- end main content --> 
     </div> 
     <!-- end mainContent --> 
     </div> 
    </div> 
    </div>

Und hier ist mein CSS:

.main { 
    background-color: grey; 
    width: 1202px; 
    height: 156px; 
    margin: 0 auto; 
} 

.formContainer { 
    width: 1140px; 
    height: 85px; 
    background-color: green; 
} 

button { 
    height: 37px; 
    width: 160px; 
} 

.choice { 
    background-color: lightgrey; 
    height: 37px; 
} 

.checkbox { 
    width: 207px; 
    border: 1px solid white; 
} 

.choice-select { 
    width: 173px; 
} 

.choice-input { 
    width: 390px; 
}

Quelle

2016-10-13 Smithy

Sie müssen die Klasse .form-inline von Bootstrap auf Formular-Tag. Unten ist ein Beispiel:

<body> 
    <div class="container"> 
    <div class="main"> 
     <div class="formContainer"> 
     <div class="col-md-12">Lorem lorem lorem 
      <div class="pull-right">Ipsum lorem ipsum</div> 
     </div> 
     <div class="row mainContent"> 
      <!-- mainContent --> 
      <div class="col-md-7 form-inline"> 
      <!-- main content --> 

      <form class="form-inline"> 
       <div class="form-group"> 
        <label for="exampleInputName2">Name</label> 
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputEmail2">Email</label> 
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
       </div> 
       <button type="submit" class="btn btn-default">Send invitation</button> 
      </form> 

      </div> 
      <div class="col-md-5"> 
      <button class="btn btn-primary">Lorem ipsum lorem</button> 
      <button class="btn btn-success">Lorem lorem lorem</button> 
      </div> 
      <!-- end main content --> 
     </div> 
     <!-- end mainContent --> 
     </div> 
    </div> 
    </div>

Wenn Sie jede Eingabe Ihrer Form ein separates div mit Klasse .form-group und alle davon innerhalb .form-inline machen, die eine Inline-Form macht.

Quelle: Bootstrap Documentation

Quelle

2016-10-13 22:24:35

Aktivieren Sie die Kontrollkästchen und Eingabefelder in der Suchleiste

Antwort

Verwandte Themen