怎么展示 as responsive drop down list using bootstrap [closed]

Question

使用bootstrap从给出JsFiddle的第二个文本框下显示<div>列表作为响应下拉列表

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

在这个示例中，我们使用bootstrap框架和angularjs下拉，您可以使用click或default值更改它们。

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>