如何使用 bootstrap 将 <div> 显示为响应式下拉列表

Question

将<div>列表显示为响应下拉列表在第二个文本框下来自使用 bootstrap

的 JsFiddle

我有两个带有 Col-xs-6 的文本框。因为我想要这样的输出图像

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">orange</a></li>
      <li><a href="#">bnana</a></li>
      <li><a href="#">lemon</a></li>
      <li><a href="#">apple</a></li>
    </ul>
  </div>
</div>

Answer 2

input {
width: 100%;
}

那么它将与您的列表项的宽度相同。

Answer 3

在此示例中，我们 2 使用 bootstrap 框架和 angularjs 下拉，您可以通过单击或默认值更改它们。

var app = angular.module('httpApp', []);

app.controller('httpAppCtrlr', function($scope, $http) {
  $scope.items = ["orange", "banana", "lemon", "apple"]
  $scope.selected = $scope.items[0];


  $scope.onChange = function(item) {
    $scope.selected = item;
  }

  //2
  $scope.selected2 = false;

  $scope.onChange2 = function(item) {
    $scope.selected2 = item;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" ng-app='httpApp' ng-controller='httpAppCtrlr'>

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    {{selected}}
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat="item in items" ng-click="onChange(item)"><a href="#">{{item}}</a></li>
    </ul>
  </div>
  <hr>
  <div class="dropdown">
    <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
    {{selected2 ? selected2 : 'select once...'}}  
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat="item in items" ng-click="onChange2(item)"><a href="#">{{item}}</a></li>
    </ul>
    <a ng-hide="!selected2" ng-click="selected2 = false">remove</a>
  </div>
</div>

如何使用 bootstrap 将 <div> 显示为响应式下拉列表

How to show <div> as responsive drop down list using bootstrap

css

styles

twitter-bootstrap

angularjs

angular-ui-bootstrap