Zwei Bootstrap-Etiketten wechseln von links nach rechts keine mobile Ansicht

Question

Ich habe zwei Bootstrap-Etiketten zusammen. Ein Pull-links und der andere Pull-rechts.

Bitte beachten Sie die HTML:

<div class="form-group"> 
    <label class="pull-left" for="inputText">label text one</label> 
    <label class="pull-right col-md-pull-6" for="inputText">label text two</label> 
    <select class="form-control" id="inputText" name="inputText"> 
      <option value="0">Text</option> 
    </select> 
</div> 

Was ich will, Pull-rechts-Label Schwimmer auf dem mobilen tun machen und auf dem Pull-links-Label machen.

Ich weiß, dass dies mit divs mit Push und Pull getan werden kann, aber wie kann ich dies mit einem Etikett erreichen?

Ihre Hilfe sehr geschätzt.

Answer 1

Für die Etiketten, können Sie eine 12-Spaltenbreite auf kleinen Bildschirm umfassen (dh col-xs-12) und eine 6-Spalten-Breite auf mittleren und großen Bildschirmen (dh col-md-6).

Dies würde die Etiketten auf kleinen Bildschirmen und nebeneinander auf großen Bildschirmen übereinander legen.

Ich fügte eine richtige Textausrichtung auf med und großen Bildschirmen (ich wusste nicht, ob Sie das brauchten) mit Medienabfragen.

Siehe Lauf Probe unter

@media screen and (min-width: 992px) { 
 
    label.col-md-6:nth-child(2) { 
 
    text-align: right; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="form-group"> 
 
    <label class="text-left col-xs-12 col-md-6" for="inputText">label text one</label> 
 
    <label class="pull-right col-xs-12 col-md-6" for="inputText">label text two</label> 
 
    <select class="form-control" id="inputText" name="inputText"> 
 
    <option value="0">Text</option> 
 
    </select> 
 
</div>

Answer 2

Sie könnten versuchen, das Etikett in einem div platzieren und schweben die div wie so links:

<div style = "float:left;"><label class="pull-left" for="inputText">label text one</label></div>