Tạo divs đáp ứng trong bootstrap

Tôi đang thử nghiệm với bootstrap và đây là đoạn code mà tôi đã viết:Tạo divs đáp ứng trong bootstrap

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="./css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> 
     <style type="text/css"> 
      .row-centered { 
       text-align:center; 
      } 
      .col-centered { 
       display:inline-block; 
       float:none; 
       text-align:left; 
       margin-right:-4px; 
      } 
      .pos{ 
       position: relative; 
       top: 240px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row row-centered pos"> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-centered"> 
        <div class="well"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Kết quả được như trong ảnh chụp màn hình:
Nhưng khi tôi chuyển đổi sang màn hình điện thoại di động , Tôi nhận được như thế này:

Tôi muốn các div xuất hiện ở giữa với một trên một trong màn hình thiết bị di động. Tôi làm nó như thế nào? Nhưng nó không đáp ứng.

Nguồn

2015-03-13 Ajay Kulkarni

sử dụng col-md-8, col-sm-8 cùng với col-lg – Patrick

bạn đã cố gắng thay đổi hiển thị thành khối, không phải khối nội tuyến? Tôi chưa sẵn sàng cho jsfiddle ngay bây giờ –

bạn có thể sử dụng col-xs-12 trong của div của bạn, thêm video này vào mỗi div và nó sẽ làm việc như bạn mong đợi nó

LIVE DEMO

<body> 
     <div class="container"> 
      <div class="row row-centered pos"> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
       <div class="col-lg-8 col-xs-12 col-centered"> 
        <div class="well"></div> 
       </div> 
      </div> 
     </div> 
    </body>

Thông tin thêm về bootstrap grid option

Nguồn

2015-03-13 14:14:09

Bạn có thể xác định nhiều chiều rộng cho kích thước màn hình:

col-lg: màn hình lớn

col-md: giữa màn hình

col-xs: màn hình nhỏ

Trong ví dụ của bạn:

<div class="container"> 
    <div class="row row-centered pos"> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
     <div class="col-lg-8 col-xs-12 col-centered"> 
      <div class="well"></div> 
     </div> 
    </div> 
</div>

Nguồn

2015-03-13 14:23:40 maX

gì bạn đã làm với nó, đối với tôi, không phải là xấu.
bạn chỉ cần thay đổi CSS, như sau:

.row-centered { 
     text-align:center; 
     margin:0 auto; 
    } 
    .col-centered { 
     display:block; 
     float:none; 
    } 
    .pos { 
     position: relative; 
     top: 240px; 
    }

Khi bạn muốn làm cho nó nhỏ hơn, chỉ giảm 8-7 hoặc 6 và đó là tất cả được thực hiện một cách đáp ứng. Sử dụng col-lg là đúng cho màn hình lớn và nó sẽ không làm cho nó bị mắc kẹt bằng cách sử dụng nó cho hiệu suất di động.

Nguồn

2015-03-13 14:31:08

Tạo divs đáp ứng trong bootstrap

Trả lời

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