2016-08-07 17 views
0

Ich hatte eine ziemlich einfache PHP-Pulldown, die saß/sitzt, wo es sollte: auf der linken Seite einiger Tasten. Ich habe diese Webseite mit BootStrap "modernisiert", gefunden, wie man es für einen Pulldown verwendet on this SO thread.Wunsch Bootstrap Pulldown nach links von Schaltflächen verschieben. PHP Webseite

Hier ist, wo es derzeit ohne Bootstrap sitzt: (Wort nach rechts ist, was aus dem Pulldown ausgewählt wurde, in diesem Fall nach "Typ").

Before bootstrap added

Allerdings, wenn ich Bootstrap-Klasse hinzufügen (class = \ "form-control \"), es setzt sie über den Tasten, anstatt vor ihnen. Hat jemand irgendwelche Ideen, um es in der vorherigen Position zu behalten, aber nutzen Sie den guten Blick, den Bootstrap bietet?

Mein PHP-Code vor der Klasse zu ändern Klasse Bootstrap:

echo "<select name=\"cboSortBy\" class=\"admin\" onChange=\"submitForm('Available.php');\" style=\"width:100px;height:20px;\">"; 
echo "<option></option>"; 
echo "<option value=\"Date\">Sort By Date</option>"; 
echo "<option value=\"Trip Name\">Trip Name</option>"; 
echo "<option value=\"Leader Name\">Leader Name</option>"; 
echo "<option value=\"Type\">Type</option>"; 
echo "<option value=\"Level\">Level</option>"; 
echo "<option value=\"Only Mine\">Only Mine</option>"; 
echo "</select>"; 

Hier ist die HTML-Ausgabe:

<br><select name="cboSortBy" class="form-control" onchange="submitForm('Available.php');" style="width:100px;height:20px;"><option></option> 
<option value="Date">Sort By Date</option> 
<option value="Trip Name">Trip Name</option> 
<option value="Leader Name">Leader Name</option><option value="Type">Type</option> 
<option value="Level">Level</option> 
<option value="Only Mine">Only Mine</option> 
</select> 
<span class="tiny1">(Date)</span> 
<span class="tiny1">&nbsp;&nbsp;::&nbsp;&nbsp;</span> 
<a href="#" class="btn btn-primary btn-xs" style="color:white;" onclick="popitup(0,'Add.php',1,0,0);"><span class="tiny1" onmouseover="this.style.borderBottom='0.05cm dashed Tomato'" onmouseout="this.style.borderBottom='Transparent'" style="border-bottom-color: transparent;">Add Custom</span></a> 
<span class="tiny1">&nbsp;&nbsp;::&nbsp;&nbsp;</span><a href="switchboard.php" class="btn btn-warning btn-xs" style="color:white;"><span class="tiny1" onmouseover="this.style.borderBottom='0.05cm dashed Tomato'" onmouseout="this.style.borderBottom='Transparent'">Switchboard</span></a> 
<span class="tiny1">&nbsp;&nbsp;::&nbsp;&nbsp;</span> 
<a href="destroysession.php" class="btn btn-danger btn-xs" style="color:white;"><span class="tiny1" onmouseover="this.style.borderBottom='0.05cm dashed Tomato'" onmouseout="this.style.borderBottom='Transparent'">Log Off</span></a> 
<span class="tiny1">&nbsp;&nbsp;::&nbsp;&nbsp;</span><span class="tiny1">Inflate</span><input type="checkbox" name="chkVerbose" class="tinycheckbox" onclick="submitForm('Available.php');"> 
<br> 
<hr class="fatblue"> 
+1

Während Screenshots hilfreich sind, ist es nicht genug, um ohne den Code zu beheben. –

+0

Ja Jeff, tut mir leid. Ich schaltete den Computer aus, erkannte meine Unterlassung, schaltete ihn wieder ein und legte den Code für den Pulldown ein. Vielen Dank. – JustJohn

+0

Es wäre hilfreich, einen Code zu haben ... sieht so aus, als ob das Problem mehr mit dem HTML/CSS-Teil Ihrer Seite zu tun hat als der PHP-Teil ... –

Antwort

0

ich meine eigene Frage bin zu beantworten. Notwendigkeit, dass ich etwas herausgefunden habe. Jetzt weiß ich, dass dies nicht wirklich eine "reaktionsschnelle Weblösung" ist, aber das brauche ich zu diesem Zeitpunkt nicht. Wenn ja, hätte ich ein Raster mit Yada Yada verwendet.

Ich suchte bootstrap.css für die "form_control" -Klasse, die den Pulldown wie ich formatiert formatiert und es in ein Style-Tag auf der Webseite kopiert und umbenannt hat (vorerst zumindest). Dann, wenn Sie bemerken, deaktivierte ich die "Anzeige: Block;" und "Auffüllen: 6px 12px". Das hat alles ziemlich gut ausgemacht. Zur Zeit. Jeder darüber hinausgehende Rat ist auch willkommen.

<style> 
.form-control_single { 
    /*display: block;*/ 

    width: 100px; 
    height: 26px; 

    /*padding: 6px 12px;*/ 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
     -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
} 

.form-control_single:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); 
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); 
} 

</style>