Question

我正在通过查看示例从link练习Bootstrap。我试图获得与给定示例相同的输出，但我只得到简单的行。这是一段代码

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

我错过了什么？这是输出的屏幕截图 enter image description here

Answer 1

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

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

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

Answer 2

在您自己的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);
}

Answer 3

我遇到了同样的问题，并搜遍了每个地方。但经过2小时的挣扎后才知道BootStrap css Stacked to horizontal在IE-10兼容模式下无效。它是一个兼容性问题

BootStrap css堆叠到水平不起作用

3 个答案: