css - 希望将 Bootstrap Pulldown 移动到按钮的左侧。 PHP网页

Question

我有一个非常简单的 PHP 下拉菜单，它位于/位于它应该位于的位置:某些按钮的左侧。我一直在用 BootStrap 使这个网页“现代化”，找到了如何将它用于下拉菜单 on this SO thread .

这是它目前在没有 Bootstrap 的情况下所在的位置:(右边的词是从下拉列表中选择的，在本例中按“类型”排序)。

但是，当我添加 Bootstrap 类 (class=\"form-control\") 时，它将它放在按钮上方而不是按钮前面。有没有人有任何想法将它保留在以前的位置但利用 Bootstrap 提供的美观？

在将类更改为 Bootstrap 类之前我的 PHP 代码:

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

这是 HTML 输出:

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

Answer 1

我正在回答我自己的问题。必要性要求我想出一些办法。现在我知道这不是一个真正的“响应式网络”解决方案，但我现在不需要它。如果是这样，我会使用带有 yada yada 行的网格。

我在 bootstrap.css 中搜索了“form_control”类，它按照我想要的方式格式化下拉菜单，并将其复制到网页上的样式标签中并重命名(至少现在是这样)。然后，如果您注意到，我禁用了“显示: block ；”和“填充:6px 12px”。这把事情安排得很好。目前。也欢迎任何超出此范围的建议。

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