当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Desire To Move Bootstrap Pulldown to left of buttons. PHP Web page

问题描述:

I had a pretty simple PHP pulldown that sat/sits where it should: to the left of some buttons. I have been "modernizing" this webpage with BootStrap, found how to use it for a pulldown on this SO thread.

Here is where it currently sits without Bootstrap: (word to the right is what was picked from the pulldown, in this case Sort by "Type").

However when I add bootstrap class (class=\"form-control\"), it puts it above the buttons rather than in front of them. Does anyone have any ideas to keep it in the previous location but take advantage of the good look Bootstrap provides?

My PHP Code before changing class to Bootstrap class:

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>";

Here is the HTML output:

<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">

网友答案:

I am answering my own question. Necessity required that I figure something out. Now I know this is not really a "responsive web" solution, but I don't need that at this time. If so, I would have used a grid with row yada yada.

I searched bootstrap.css for the "form_control" class that formatted the pulldown like I wanted and copied it into a style tag on the webpage and renamed it (for now, at least). Then if you notice, I disabled the "display: block;" and "padding: 6px 12px". This lined things up pretty good. For now. Any advice beyond this is welcome also.

<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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: