1

我正在通过查看示例从这个链接练习引导程序。我试图获得与给出的示例相同的输出，但我只得到简单的行。这是一段代码

<!DOCTYPE html>
<html>
  <head>
    <title>Prices for todo app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>
<div class="container">
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
</div>
 <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  $('#my-modal').modal({
  show:true,
  closeOnEscape: true
});
</script>
  </body>
</html>

我错过了什么？这是输出的屏幕截图 在此处输入图像描述

4

3 回答 3

1

您需要将引导 CSS 文件保存到计算机上的相应目录中。它们需要与您的 HTML 文件位于同一文件夹中，但从那时起遵循以下路径："bootstrap-3.0.0/dist/css/..."

您可以找到这些 CSS 文件以及从 Bootstrap 网站下载的其他内容。

编辑：这是一个 JSFiddle，演示了在 Bootstrap 中使用网格：http: //jsfiddle.net/EELqA/

于 2013-10-16T05:22:36.490 回答
0

我遇到了同样的问题，到处搜索。但是经过 2 小时的挣扎后才知道 BootStrap css Stacked to Horizo​​ntal 在 IE-10 兼容模式下无法正常工作。这是一个兼容性问题

于 2014-08-30T13:14:03.273 回答
0

在自己的css文件中添加如下css样式，在class="row show-grid"中使用

.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}
于 2014-01-21T06:07:53.480 回答