Question

我正在学习网格系统的螺母和螺栓，尽管如此我遵循了其他开发人员无法获得的示例和模板我的测试项目出现在两列中。它不断显示堆叠。

以下是我学习的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title></title>
  <style>
    .col-md-8 {
        border: 2px solid red;
        background-color: red;
        color: white;
        text-align: center;
    }
    .col-md-4 {
        border: 2px solid blue;
        background-color: blue;
        color: white;
        text-align: center;
    }
    body {
        background-color: grey;
    }
  </style>
  </head>
  <body>
    <div class="container">
       <div class="row">
          <div class="col-md-8">
             <p>Just some random text. First column.</p>
          </div>
          <div class="col-md-4">
             <p>Another random text. Second column.</p>
          </div>
       </div>
    </div>



  </body>
  </html>

就像我说的那样，这些代码因某些原因而适用于其他人。他们刚刚添加了更多列，就像游戏一样。我甚至无法获得2列。

Answer 1

我理解以下内容：

您想要两列，以便div.col-md-8和div.col-md-4彼此相邻
目前这两个div是堆叠的（坐在彼此的顶部）

此codepen is your code引用bootstrap-min（3.3.7）。它看起来像你期望的那样工作。您必须在下面点击full page才能看到所需的布局;内联它似乎干扰了这个页面的风格。

也许你的css路径不正确？
当您打开dev tools时，您看到了什么？

这会解决您的问题吗？

代码示例

body { background-color: grey; }
div { color: white; text-align: center;}
.col-md-8 { background-color: red; }
.col-md-4 { background-color: blue; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <p>Just some random text. First column.</p>
    </div>
    <div class="col-md-4">
      <p>Another random text. Second column.</p>
    </div>
  </div>
</div>

网格系统布局

1 个答案:

代码示例