なぜ私のブートストラップの井戸の高さが列と行を収容するために増加しないのですか？

Question

私は高低を狩りました。私は90％が浮遊要素に起因していると確信しており、私の問題に対する答えはclearの適切なアプリケーションです。

残念ながら、私はCSSで十分に精通していないため、どこに修正プログラムを適用してハッキングするのかわからないので、誰かを助けることができますか？

私はwellを展開して、私のBootStrap列の要素とその子を包含したいと考えています。

あなたが生きてそれを見てみたい場合、私は、次のHTML in a CodePenを持っています。ここ

<div class="container-fluid"> 
    <div class="well"> 
     <div class="col-md-1"> 
      <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button> 
      <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button> 
     </div> 
     <div class="col-md-10"> 
      <label> Sample title field</label> 
      <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
     </div> 
     <div class="col-md-1" style="text-align: center;"> 
      <div>Score</div> 
      <span class="badge" style="font-size: 42px !important;">42</span> 
     </div> 
    </div> 
</div> 

Answer 1

問題は、あなたがcoldiv年代のすべてを保持するためrow要素を含んでいないということです。

だからあなたがする必要があるすべてはあなたのクラスwellがである同じdivにクラスrowを追加しているので、同様に

：。

<div class="container-fluid"> 
<div class="well row"> 
    <div class="col-md-1"> 
     <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button> 
     <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button> 
    </div> 
    <div class="col-md-10"> 
     <label> Sample title field</label> 
     <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
    </div> 
    <div class="col-md-1" style="text-align: center;"> 
     <div>Score</div> 
     <span class="badge" style="font-size: 42px !important;">42</span> 
    </div> 
</div> 

ここ

を与えるためにBootplyですあなたは視覚的です。 rowのみ12列まで保持することができますので、..あなたは、1 + 10 + 1 = 12ので、そのrow内col、それ以上を追加することはできません

今...あなたがない限り、別のrowを作成する必要がありますもちろんあなたはあなたの現在のcolを小さくします。

希望すると便利です。