Wählen Sie form und Ihr label in derselben Zeile in bootstrap3

Habe ich folgenden HTML-code:

<div class="col-sm-4">
      <div class="form-group" class="form-inline">
        <span style="white-space: nowrap">
          <label for="size">Board size:</label>
          <select class="form-control" id="size" style="background-color: black; color: silver">
            <option>small</option>
            <option>medium</option>
            <option>large</option>
            <option>huge</option>
          </select>
        </span>
      </div>
    </div>

Was ich erreichen möchte, ist wählen Sie form und Ihr label in derselben Zeile. Ich habe versucht, die Anwendung von Lösungen aus ähnlichen Frage von stackoverflow. Span mit white-space: nowrap funktioniert nicht, weder class="form-inline" oder Antwort aus diese Frage :Halten Sie die Schaltflächen und-Formular mit select-dropdown auf der gleichen Zeile in der Bootstrap-3 Wie kann ich es lösen?

InformationsquelleAutor Furman | 2016-07-19
  1. 5

    Hier ist eine Möglichkeit :

    Bootply : http://www.bootply.com/YzaMGyRq99

    CSS :

    select.form-control{display:inline-block}

    HTML :

    <div class="col-sm-4">
      <div class="form-group">
        <span style="white-space: nowrap">
          <label for="size">Board size:</label>
          <select class="form-control" id="size" style="background-color: black; color: silver">
            <option>small</option>
            <option>medium</option>
            <option>large</option>
            <option>huge</option>
          </select>
        </span>
      </div>
    </div>
    InformationsquelleAutor Pimento Web
  2. 6

    Möchten Sie dieses

    HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
 <body>
   
<form class="form-inline">
  <div class="form-group">
    <label for="size">Board size:</label>
     <select class="form-control" id="size" style="background-color: black; color: silver">
            <option>small</option>
            <option>medium</option>
            <option>large</option>
            <option>huge</option>
          </select> 
  </div>

</form>
    
</body>
</html>

    • Dies ist der richtige Weg, und sollte die akzeptierte Antwort.
    InformationsquelleAutor Head In Cloud
Schreibe einen Kommentar