Question

我正在使用带有Wordpress的Bootstrap 3.0，而我的列在我的第二行中无效。我希望它们在同一行显示为2个div。相反，它们是堆叠的，我似乎无法弄清楚我哪里出错了。我刚刚开始并在我的标题中使用内部样式来调整我的网格并使我的布局失效。

我使用MAMP和Chrome在localhost上运行此功能。任何帮助将不胜感激！

到目前为止，这是代码：

的index.php

 <!doctype html>
    <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Bootstrap and WP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap.css" rel="stylesheet" media="screen">

<style>

.col-xs-12 {
      height: 50px;
      background-color: blue;
      color: white;
      text-align: center;
      border: 1px solid black;
}
.col-xs-6 {
      height: 50px;
      background-color: yellow;
      color: black;
      border: 1px solid black;
      text-align: center; 
    }
  </style>
 </head>

<body>

  <div class="container">

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

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

    </div>
</div>

</body>
</html>

Answer 1

检查bootstrap.css文件。我的col-xs-6面板遇到了同样的问题，css文件有.col-xs-5,.col-xs-12,.col-xs-7而不是.col-xs-5,.col-xs-6,.col-xs-7。应该是.col-xs-6的所有实例都是.col-xs-12。修复bootstrap.css和bootstrap.min.css文件中的这些问题。

col-xs-6 bootstrap堆叠为col-xs-12

1 个答案: