我的 Twitter Bootstrap's Row 有什么问题？

我一直在尝试通过以前的问题，google和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

非常感谢

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

之类的东西

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

相关内容

最新更新

热门标签：