Question

我正在开发一个使用Bootstrap 3的应用程序。我有一个下拉列表，目前定义如下：

<select id="options" class="form-control">
  <option>Go home</option>
  <option>Go Left</option>
  <option>Go Up</option>
  <option>Go Right</option>
  <option>Go Down</option>
</select>

我喜欢下拉列表的行为，因为当您选择一个选项时，会显示其文本。我也喜欢下拉伸展以填充可用空间的事实。但是，我想要Bootstrap's button drop downs提供的分隔符。为了充分利用这两个方面，我尝试了以下方法：

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Go Home... <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Go Home</a></li>
    <li class="divider"></li>
    <li><a href="#">Go Left</a></li>
    <li><a href="#">Go Up</a></li>
    <li><a href="#">Go Right</a></li>
    <li><a href="#">Go Down</a></li>
  </ul>
</div>

当我选择一个选项时，文本不会更新。此外，下拉不会延伸以填充可用空间。

Answer 1

您可以使用<?php include('dbcon.php'); $username = $_POST['username']; $password = $_POST['password']; $stm = $conn->prepare("select * from database where username = ? and password = ?"); $stm->execute(array($username, $password)); $count = $stm->rowCount(); $row = $stm->fetch(PDO::FETCH_ASSOC); if ($count > 0) { session_start(); $_SESSION['id'] = $row['member_id']; header('location:home.php'); } else { header('location:index.php'); } ?>类来制作按钮和下拉填充宽度..

btn-block

让下拉列表作为选择控件的唯一方法是使用JavaScript和/或jQuery这样的..

   <div class="btn-group btn-block">
              <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        Go Home... <span class="caret"></span>
              </button>
              <ul class="dropdown-menu btn-block" role="menu">
                    <li><a href="#">Go Home</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Go Left</a></li>
                    <li><a href="#">Go Up</a></li>
                    <li><a href="#">Go Right</a></li>
                    <li><a href="#">Go Down</a></li>
              </ul>
   </div>

演示：http://codeply.com/go/KI7AAEtWeo

使用Bootstrap中的按钮模仿选择行为

1 个答案: