Question

我有一个带有3列的bootstrap div，如下面的html中所示，当我在行的第一个div中有一个select控件时，剩下的div不显示。但如果我注释掉同样的问题，请查看hello world text。所有列都应该显示出来。

不确定我错过了什么，因此寻找一套新的眼睛来指出什么是错的。：）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div style="text-align:center">
    <h1>Wind Monitoring System </h1>
  </div>
  <div class="row">
    <div class="col-md-4" style="background:blue">
      <span>Hello World1</span>
      <!--<div>
                    <select id="states" ng-model="selectedState" ng-change="getCities()" size="3" ng-options="state.Name for state in states" />
                </div>-->
    </div>
    <div class="col-md-4" style="background:blue">
      <span>Hello World2</span>
    </div>
    <div class="col-md-4" style="background:blue">
      <span>Hello World3</span>
      <!--<select id="city" ng-show="selectedState != null" ng-model="selectedCity" size="3" style="height:200px;width:200px" ng-options="city.city for city in cities | filter : {State:selectedState.Name}" />-->
    </div>
  </div>
</div>

Answer 1

如果我没有弄错，那么select标签应该是<select></select>我相信你应该绑定你的选项而不是你的<select>标签。

Check this link out

好的，你去吧

<强> HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="app">
<div class="container-fluid">
  <div style="text-align:center">
    <h1>Wind Monitoring System </h1>
  </div>
  <div class="row">
    <div class="col-md-4" style="background:blue">
        <span>Hello World1</span>
        <div ng-controller="Test">
            <select ng-model="selectedState" size="3" ng-options="item for item in items"></select>
        </div>
    </div>
    <div class="col-md-4" style="background:blue">
      <span>Hello World2</span>
    </div>
    <div class="col-md-4" style="background:blue">
      <span>Hello World3</span>
    </div>
  </div>
</div>
</div>

<强>的JavaScript

    var app = angular.module('app',[]);
app.controller('Test',function($scope){
   $scope.items = ['one','two','three','four']
});

我相信我所做的只是添加结束标记。

Bootstrap列未按预期工作

1 个答案: