我只是用我的第一個引導項目，但是這一次在體內實驗：引導div的不相鄰

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

但不知何故，兩個div都略低於對方，而不是下一個彼此對齊，因爲他們應該是。

有人有一個想法，我做錯了什麼？

來源

2014-09-04 herbigt

您是否已經檢查過例如Firebug或其他Web開發工具，這適用於您的div的CSS？例如。如果他們有左浮動和正確的大小，並且包含bootstrap.css等。 – 2014-09-04 22:14:01

您確定您正確地添加所需文件？我把你的代碼放入一個沙箱中，並且工作。下面是完整的HTML與您發佈的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    </div> 
</div> 
</body> 
</html>

來源

2014-09-04 22:21:25

正如你可以看到here，如果你不加載bootstrap.css正確，該列的行爲像你描述。但是如果你確實包含了它，就像here：，你會發現它們的行爲與你想要的一樣。只是一定要包括引導，從一個CDN或本地：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

或

<link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- or wherever you keep it -->

來源

2014-09-05 03:44:17

試試這個：

請通過grid system in bootstrap

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8">.col-xs-12 .col-md-8</div> 
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">.col-xs-6 .col-md-4</div> 
    </div> 
</div>

DEMO

來源

2014-09-05 04:43:57

引導div的不相鄰

回答

DEMO

相關問題