Tại sao bản thân bootstrap của tôi không tăng chiều cao để chứa các cột và hàng bên trong?

Question

Tôi đã săn lùng cao và thấp và tôi 90% thuyết phục vấn đề của tôi xuất phát từ các yếu tố nổi và câu trả lời cho vấn đề của tôi là ứng dụng thích hợp của clear.

Thật không may là tôi không đủ thông thạo CSS để biết nơi áp dụng sửa lỗi và hack vào nó dường như không đưa tôi đến đó, ai đó có thể giúp đỡ?

Tôi muốn well mở rộng để bao gồm các yếu tố cột BootStrap và con cái của họ.

Tôi có HTML sau in a CodePen nếu bạn muốn có một cái nhìn vào nó trực tiếp:

<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

Vấn đề ở đây là bạn không bao gồm một yếu tố row để giữ tất cả các coldiv 's.

Vì vậy, tất cả các bạn cần làm là thêm lớp row với cùng div rằng lớp học của bạn well là trong

Giống như vậy:.

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

Đây là một Bootply để cung cấp cho bạn một hình ảnh.

Bây giờ kể từ khi một row chỉ có thể chứa đến 12 cột .. bạn sẽ không thể thêm nữa col bên trong đó row từ 1 + 10 + 1 = 12 ... bạn sẽ phải tạo một row trừ tất nhiên bạn làm cho nhỏ hơn hiện tại của bạn col.

Hy vọng điều này sẽ hữu ích!