Nội dung trung tâm của thùng chứa hàng Bootstrap

Tôi có mã bên dưới và tôi muốn căn giữa các phần tử "tốt" của div "hàng" bên ngoài. Tôi đã thử nhiều cách tiếp cận khác nhau như căn chỉnh văn bản: trung tâm (chỉ tập trung văn bản chứ không phải các phần tử DIV bên trong.Nội dung trung tâm của thùng chứa hàng Bootstrap

Đây là một trang "gạch" tốt và ý tưởng đó . sau 4 hoặc lâu hơn nó kết thúc tốt đẹp Nhưng nếu nó là ít hơn 4, họ nên xuất hiện tập trung vào trang

<body class="container-fluid"> 
    <div class="row"> 
     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 

     </div> 

     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Nguồn

2012-11-19 Gregg

tôi giải quyết điều này bằng cách làm như sau:.

<body class="container-fluid"> 
    <div class="row"> 
     <div class="span6" style="float: none; margin: 0 auto;"> 
      .... 
     </div> 
    </div> 
</body>

Nguồn

2012-11-19 22:35:02 Gregg

Chỉ cần chạy một kiểm tra, cần lưu ý rằng chỉ những phong cách cần phải được thêm vào. –

Hãy thử điều này, nó hoạt động !

<div class="row"> 
    <div class="center"> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 1!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 2!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 3!</p> 
     </div> 
    </div> 
</div>

Sau đó, trong css xác định độ rộng của div trung tâm và trung tâm trong một tài liệu:

.center { 
    margin: 0 auto; 
    width: 80%; 
}

Nguồn

2015-04-04 13:21:22 Ezequiel

-1

Đặt một thùng chứa bên trong hàng của bạn, và nó sẽ tập trung các nội dung cho bạn.

<body class="container-fluid"> 
    <div class="row"> 
     <div class="container"> 
      content goes here... 
     </div> 
    </div> 
</body>

Nguồn

2017-06-05 21:43:26

Với Bootstrap 4, có một lớp css dành riêng cho việc này. Nội dung bên dưới sẽ căn giữa hàng:

<div class="row justify-content-center"> 
    ...inner divs and content... 
</div>

Xem: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment, để biết thêm thông tin.

Nguồn

2017-12-12 01:53:01

bootstrap mới nhất: https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment – hughjdavey

Đối với Bootstrap 4, sử dụng mã dưới đây:

<div class="mx-auto" style="width: 200px;"> 
    Centered element 
</div>

Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

Nguồn

2018-02-10 11:31:26

Nội dung trung tâm của thùng chứa hàng Bootstrap

Trả lời

Các vấn đề liên quan