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

Question

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

JsFiddle

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

Answer 1

DataGridView1.SelectionChanged

Answer 2

‘/tmp/RtmpxlGnqJ/downloaded_packages’

然后它将采用相同宽度的列表项。

Answer 3

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

＆＃13;

＆＃13;

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;
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;