neden benim önyükleme kuyu yüksekliği artışı iç sütunları ve satırları karşılamak için değil?

Question

Ben yüksek ve düşük avlanan ve ben% 90 benim sorunum yüzen elementlerden ve benim sorunun cevabı clear doğru bir uygulama olduğunu kaynaklanıyor ikna değilim.

Ne yazık ki iyi yerde düzeltmeyi uygulamak ve ona hack birisi yardımcı olabilir, beni orada alıyor gibi görünmüyor bilmek CSS yeterli usta değilim?

Ben well benim Bootstrap sütun elemanları ve çocukları kapsayacak şekilde genişletmek istiyorum.

<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

burada sorun coldiv 's her tutacak bir row öğesi de kalmamasıdır: canlı ona bir göz almak istiyorsanız

Aşağıdaki HTML in a CodePen var.

Yani yapmanız gereken tüm sınıf well yılında aynı div için sınıf row eklemek yani gibi

.

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

İşte

vermek için bir Bootply olduğunu Sen bir görselsin. Bir row sadece 12 sütununa kadar tutabilir beri

Şimdi .. içinizde col bir daha eklemek mümkün olmayacaktır row beri 1 + 10 + = 12 1 ... Başka row sürece oluşturmak zorunda kalacak Tabii ki mevcut col'unuzu daha küçük hale getiriyorsunuz.

Bu yardımcı olur umarız!