DEMO

Question

我正在试验我的第一个Bootstrap项目，但是这个项目在体内：

<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正好在彼此之下，而不是彼此相邻，因为它们应该是对齐的。

有人有想法吗，我做错了什么？

Answer 1

您确定要正确添加所需文件吗？我将您的代码放入沙箱中并且有效。这是包含您发布的代码的完整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>

Answer 2

试试这个：

请浏览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

Answer 3

如您所见 here ，如果您未正确加载bootstrap.css，则列的行为与您所描述的相同。但是如果你确实包含它，比如 here：，你会发现它们的行为与你想要的一样。请确保从cdn或本地包含bootstrap：

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

Bootstrap div不是彼此相邻的

3 个答案:

DEMO