Question

我一直在尝试通过此前的问题，Google和Bootstrap的文档来解决我的Bootstrap页面的问题，但在过去的两天里，我一直无法解决问题。可悲的是，我打赌这很简单。

我修改了英雄单位的大小并添加了背景图像。从那时起，它下面的div行已经分成三行，而不是将三个span4维持在一行上。再一次，我确定这是一个愚蠢的问题，但我仍然是Bootstrap的新手以及网格如何工作。

任何人都知道问题是什么以及如何纠正它？代码如下。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>With Bootstrap</title>
    <link rel="stylesheet" href="http://www.ascentapps.com/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Rock+Salt|Dosis:200' rel='stylesheet' type='text/css'>
</head>

 <body>
    <div class="container-fluid">

         <div class="hero-unit">
         </br>
         </br>
         </br>
         </br>
         </br>
         </br>
         </br>
         <div align="center">
         <h1><center>Moving Sale?</center></color></h1>
         </br>
         <p style= "color: white; font-family: 'Dosis', sans-serif; font-size: 22px">Make it a whole lot easier</p>
         </div>
         </div><!-- .hero-unit -->

         <div class="row">
         <div class="span4">
         <center><button type="button" class="btn btn-default btn-lg">
         <span class="glyphicon glyphicon-paperclip"></span>
         </button>
         <p>text</p></center>
         </div><!-- .span4 -->

         <div class="span4">
         <center><button type="button" class="btn btn-default btn-lg">
         <span class="glyphicon glyphicon-pushpin"></span>
         </button>
         <p>text </p></center>
         </div><!-- .span4 -->

         <div class="span4">
         <center><button type="button" class="btn btn-default btn-lg">
         <span class="glyphicon glyphicon-lock"></span>
         </button>
         <p>text </p></center>
         </div><!-- .span4 -->

 </div><!-- .row -->
 </div><!-- .container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 </body>
</html>

以下是我在标准bootstrap.min.css末尾添加的CSS：

.hero-unit {height: 100%; max-height:400px; min-height:400px;background:url(http://ascentapps.com/furniture.jpg)}h1 {font-family: 'Rock Salt', cursive;color:white;}span.glyphicon-paperclip {border: 3px solid orange;color: orange;font-size: 8em;}span.glyphicon-pushpin {border: 3px solid orange;color: orange;font-size: 8em;}span.glyphicon-lock {border: 3px solid orange;color: orange;font-size: 8em;}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.glyphicon-bell:before {
  content: "";
}
.glyphicon-bookmark:before {
  content: "";
}
.glyphicon-briefcase:before {
  content: "";
}
.glyphicon-calendar:before {
  content: "";
}
.glyphicon-camera:before {
  content: "";
}
.glyphicon-fire:before {
  content: "";
}
.glyphicon-lock:before {
  content: "";
}
.glyphicon-paperclip:before {
  content: "";
}
.glyphicon-pushpin:before {
  content: "";
}
.glyphicon-wrench:before {
  content: "";

.container-fluid .row-fluid [class*="span"] {
    margin-left:0px;
}

是否有人知道导致分手的原因是什么？

可以在此处查看该页面：http://www.test.ascentapps.com/indextest.html

非常感谢

Answer 1

你正在使用不再使用span4的bootstrap 3。你可能想要col-md-4

之类的东西

http://getbootstrap.com/css/#grid

我的Twitter Bootstrap的行有什么问题？

1 个答案: