Bootrsap跨度和行不起作用

我嘗試使用bootsrap，但它不影響我的佈局。我想要的佈局是這樣（的顏色和包裝盒有助於給你在屏幕上的文字應該是一個想法）： enter image description here Bootrsap跨度和行不起作用

相反，它是這樣的：

enter image description here

這裏是我的代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="../css/top.css"> 
<link 
    href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Gloria+Hallelujah|Architects+Daughter' 
    rel='stylesheet' type='text/css'> 
<title>Top</title> 
</head> 

<body> 
    <div class="container"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       Fluid 12 
       <div class="row-fluid"> 
        <div class="span6"> 
         Fluid 6 
         <div class="row-fluid"> 
          <div class="span6">Fluid 6</div> 
          <div class="span6">Fluid 6</div> 
         </div> 
        </div> 
        <div class="span6">Fluid 6</div> 
       </div> 
      </div> 
     </div> 



    </div> 
</body> 
</html>

來源

2015-03-30 Filip Eriksson

span和row-fluid自舉3起已被棄用。

只需使用container-fluid，並保持，而不是row-fluid一個row股利和使用col-xs代替span這樣的：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12">....</div> 
     <div class="col-xs-6">....</div> 
    </div> 
</div>

來源

2015-03-30 18:17:53

我建議考慮看看文檔在這裏：http://getbootstrap.com/css/#grid

正如下面提到，版本發生了變化，但對於您正在尋找的佈局，我會使用類似的內容（當您運行代碼段時單擊完整頁面）：

.container { 
 
    text-align: center; 
 
} 
 
.col-md-6, .col-md-12, .col-md-3 { 
 
    background-color:grey; 
 
    margin:5px 0; 
 
    border-radius:3px; 
 
    }

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     12 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     6 
 

 
    </div> 
 
    <div class="col-md-6"> 
 
     6 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     3 
 
     </div> 
 
    <div class="col-md-3"> 
 
     3 
 
     </div> 
 
    </div> 
 
</div>

有一些非常有用的例子呢！

來源

2015-03-30 18:17:56 cnorthfield

Bootrsap跨度和行不起作用

回答

相關問題