我有一个网站正在开发中,我有一个关于部分和一些产品盒,产品盒在关于我们信息的分隔容器中。同类产品容器ID为与第一容器级别...这里是我的代码 图片:Bootstrap容器问题
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Cold Cure Windows</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers @ Ice7Media">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap-styles/bootstrap.min.css" rel = "stylesheet">
<link href = "css/animate.css" rel= "stylesheet">
<link href = "css/global-styles.css" rel = "stylesheet">
<link href = "css/page-styles/home.css" rel= "stylesheet">
<link rel = "shortcut icon" href = "img/bocFav.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Vollkorn:400,400italic,700,700italic|Quicksand:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
==================================================================================-->
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-lg-6 vline">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="action-button callback">
request a <span>Brochure</span>
</div>
<div class="action-button callback">
<br><span>Contact Us</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu col-lg-6 col-lg-offset-6">
<a href="#" class="menu-link" style="background: url('/img/Image1.jpg');">
<span>Windows</span>
</a>
</div>
</div>
</section>
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"> </script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/fix-nav.js"></script>
<script src="js/map.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
家
/*=========================================================================================== B9B9B9 */
.about-us {
padding-top: 100px;
padding-bottom: 100px;
background-color: #D0D0D0;
color: #1F1F1F;
}
.row-2 {
padding-top: 350px;
padding-left: 11px;
}
.menu-product {
height: 160px;
text-align: center;
}
.menu-link {
display: block;
position: absolute;
height: 240px;
width: 240px;
border: 1px solid #0095D5;
margin-bottom: 15px;
background-size: cover !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-link:hover {
transform: scale(1.045);
}
.menu-link > span {
position: absolute;
width: 100%;
text-align: center;
background: #0095D5;
color: white;
bottom: 0px;
left: 0px;
height: 30px;
line-height: 30px;
}
.set-2{
padding-top: 100px;
padding-right: -100px;
}
.set-3{
padding-top: 450px;
padding-right: -100px;
}
这里是所有主要文件我的网站使用...我希望有人可以帮我解决这个问题,因为它现在正在停止我的发展
非常感谢任何帮助 谢谢 Tom
该死的代码是一个最有可能真正的小问题...很多阅读材料的;),可以最大限度地减少HTML和CSS和提供商[最低可验证的示例](http://stackoverflow.com /帮助/ MCVE)? – giorgio
@giorgio为你编辑! –
看起来你只需要尝试了解Bootstrap网格系统是如何工作的。 – DavidG