我有一個網站正在開發中,我有一個關於部分和一些產品盒,產品盒在關於我們信息的分隔容器中。同類產品容器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