0

私の webapp プロジェクトでは、Bootstrap をフロント エンド フレームとして使用しています。そして、私にとって紛らわしい問題が1つあります。HTML コードは次のとおりです。

    <form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-lg-2" for="candidatecity">Cities</label>
        <div class="col-lg-2">
            <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select>
        </div>
        <div class="input-group col-lg-2">
            <span class="input-group-addon glyphicon glyphicon-search"></span><input type="text" class="form-control" id="searchcity" placeholder = "Search City">
        </div>

        <label class="control-label col-lg-2" for="period">Time Period</label>
        <div class="col-lg-2">
            <select class="form-control"  ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select>
        </div>

        <div class="col-lg-2">
            <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button>
        </div>
    </div>

</form>

しかし、結果は次のとおりです。 ここに画像の説明を入力

紛らわしい点は、すべての列幅の合計がちょうど 12 であることです。これは、グリッド システムのルールに従います。しかし、これらのコンポーネントを 1 行に配置できなかったのはなぜでしょうか?

4

2 に答える 2

0

input-groupクラスのせいです。削除すると、要素が一列に収まります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-lg-2" for="candidatecity">Cities</label>
    <div class="col-lg-2">
      <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select>
    </div>
    <div class="col-lg-2">
      <span class="input-group-addon glyphicon glyphicon-search"></span><input type="text" class="form-control" id="searchcity" placeholder = "Search City">
    </div>

    <label class="control-label col-lg-2" for="period">Time Period</label>
    <div class="col-lg-2">
      <select class="form-control"  ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select>
    </div>

    <div class="col-lg-2">
      <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button>
    </div>
  </div>

</form>

その後、検索アイコンのスタイルを適切に設定する必要があります。

于 2016-05-31T20:40:00.060 に答える