創建在引導

響應的div我與引導試驗，這是我寫的代碼：創建在引導

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

爲如下的截屏輸出：
但是，當我轉換成手機屏幕，我得到這樣的：

我希望divs出現在中心，在移動屏幕上也有一個在上面。我該怎麼做？但它沒有響應。

來源

2015-03-13 Ajay Kulkarni

使用col-md-8，col-sm-8和col-lg – Patrick 2015-03-13 14:13:35

是否嘗試將顯示更改爲塊，而不是內嵌塊？我現在還沒有準備好jsfiddle – 2015-03-13 14:16:40

，你可以使用你的div的col-xs-12，將它添加到每一個DIV，它會像你期望它

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>

更多關於引導grid option

來源

2015-03-13 14:14:09

你可以爲屏幕尺寸定義多個寬度：

col-lg：大屏幕

col-md：屏幕中間

col-xs：小屏幕

在您的例子：

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

來源

2015-03-13 14:23:40 maX

什麼你用它做，對我來說，是不是壞。
你只需要修改CSS，如下：

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

當你想使其更小，只是減少8至7或6，這一切都響應完成。使用col-lg對於大屏幕來說是真實的，並且它不會阻止它用於移動性能。

來源

2015-03-13 14:31:08

回答

相關問題