Question

这是我的代码......

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Brandi</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>

<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>
</html>

所有链接都正常工作。但是列不起作用。

输出：

Answer 1

首先，您需要有容器，容器将根据您的屏幕大小确定容器的大小，最好是确定容器中水平部分的行。

以下是bootstrap源代码的片段。它根据视口/屏幕大小设置不同的大小

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

第二次，您还需要一个元标记让引导程序知道屏幕大小。

<meta name="viewport" content="width=device-width, initial-scale=1">

这是片段。尝试在大屏幕和小屏幕上查看结果。

＆＃13;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <title>Brandi</title>
</head>
<body>
<div class="container">
  <div class="row">
     <div class="col-xs-3 col-lg-3 well">Column 3</div>
     <div class="col-xs-3 col-lg-3 well">Column 3</div>
     <div class="col-xs-3 col-lg-3 well">Column 3</div>
     <div class="col-xs-3 col-lg-3 well">Column 3</div>                   
  </div>     
</div>
</body>
</html>

＆＃13;

网格的工作方式是，将网格数除以12.因此，当您使用col-md-3时，div的大小将为：

3/12 * (container-size)

请注意，md只是确定它应该应用于哪个屏幕。因此，选择是xs，sm，md，lg

Answer 2

在将它们包装到容器类中时，它对我来说非常有效。

<div class="container">
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
</div>

也许你的屏幕对于md很小，试试xs，只是为了确保它不是因为屏幕尺寸。（抱歉，还没有评论）

<div class="container">
    <div class="col-xs-3 well">Column 3</div>
    <div class="col-xs-3 well">Column 3</div>
    <div class="col-xs-3 well">Column 3</div>
    <div class="col-xs-3 well">Column 3</div>
</div>

Answer 3

您应该先加载bootstrap.min.js。（当然，除了jQuery之外，总是首先加载它，但是你得到了我确定的观点）

这也避免了您可能遇到的任何未来问题，因为您在页面底部加载了JavaScript。在加载CSS之前将其移至标题。

还建议将列包裹在.row内，但不是必需的。否则你的代码似乎没问题！

Answer 4

你的代码工作正常，可能看起来'js'和'css'的路径是错误的。尝试使用

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Brandi</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="all" />
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
    <div class="col-md-3 well">Column 3</div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Answer 5

问题在于我的bootstrap.min.css文件。虽然它正确加载但它无法正常工作。当我更改代码并与CDN链接然后它工作。我的代码是

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

这是主要问题。然后我换了......

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

现在好了。但我对bootstrap.min.css文件的这种奇怪行为有好奇心。与其他人一样吗？如果确实如此，那是什么原因？

Bootstrap列不起作用

5 个答案: