Wählen Sie und beschriften Sie in einer Zeile Bootstrap

Question

Ich versuche, Label und wählen Sie in einer Zeile, aber es funktioniert nicht arbeiten nicht, ich bin auch hinzufügen "Col" -Klasse, aber es macht es ist uneben.

<div class="row"> 
    <h3>Language </h3> 
    <select class="form-control"> 
     <option value="CSharp">C#</option> 
     <option value="CPP">C++</option> 
     <option value="XML">XML</option> 
     <option value="JavaScript">JavaScript</option> 
     <option value="SQL">SQL</option> 
     <option value="HTML">HTML</option> 
    </select> 
</div> 

Answer 1

Sie müssen Ihre Formulargruppe mit einem Formular verknüpfen, das das Attribut inline hat. Außerdem macht h3 im Grunde eine Pause nach dem Inhalt, Sie müssen es entweder einstellen: Inline oder meiner Meinung nach wäre die bessere Lösung, ein Label zu verwenden.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label>Language </label> 
 
    <select class="form-control"> 
 
     <option value="CSharp">C#</option> 
 
     <option value="CPP">C++</option> 
 
     <option value="XML">XML</option> 
 
     <option value="JavaScript">JavaScript</option> 
 
     <option value="SQL">SQL</option> 
 
     <option value="HTML">HTML</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 2

eine schnelle Lösung zum Problem ist das select umschlingen Label

HTML

<div class="form-group"> 
    <label>Language 
     <select class="form-control"> 
      <option value="CSharp">C#</option> 
      <option value="CPP">C++</option> 
      <option value="XML">XML</option> 
      <option value="JavaScript">JavaScript</option> 
      <option value="SQL">SQL</option> 
      <option value="HTML">HTML</option> 
     </select> 
    </label> 
</div> 

CSS

.form-group label { 
    float: left; 
    text-align: left; 
    font-weight: normal; 
} 

.form-group select { 
    display: inline-block; 
    width: auto; 
    vertical-align: middle; 
} 

Beispiel hier CODEPEN

genießen .. :)

Answer 3

prüfen diese

.col-md-6 > h3 { 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 0 20px 0 
 
} 
 
select.form-control { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 50%; 
 
}

<div class="row"> 
 
     <div class="col-md-6"> 
 
     <h3>Language </h3> 
 
     <select class="form-control"> 
 
      <option value="CSharp">C#</option> 
 
      <option value="CPP">C++</option> 
 
      <option value="XML">XML</option> 
 
      <option value="JavaScript">JavaScript</option> 
 
      <option value="SQL">SQL</option> 
 
      <option value="HTML">HTML</option> 
 
     </select> 
 
     </div> 
 
\t </div>

Answer 4

<div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
    <div class="col-md-2 col-sm-4 col-xs-4"> 
    <span>Language </span> 
    </div> 
    <div class="col-md-8 col-sm-8 col-xs-8"> 
    <select class="form-control"> 
     <option value="CSharp">C#</option> 
     <option value="CPP">C++</option> 
     <option value="XML">XML</option> 
     <option value="JavaScript">JavaScript</option> 
     <option value="SQL">SQL</option> 
     <option value="HTML">HTML</option> 
    </select> 
    </div> 
    </div> 

</div> 

Mit Gitter dies getan werden kann codepen