html - 引导问题：列之间没有空间，页脚和部分之间不需要额外的空间
问题描述
我正在做一个房地产网站项目。我已经创建了 Photoshop 模板并将其上传到 Behance。 https://www.behance.net/csc103falld848
现在，我正在创建房地产商店模板的静态版本。
我面临一个问题。我无法在列之间创建空间。此外，页脚和部分之间还有多余的空间。
#properties-image {
height: 25%;
}
#properties-list {
background-color: #c0c0c0;
}
.property-list-container {
padding-top: 20px;
}
#font-awesome-icons-store-first {
float: left;
}
#font-awesome-icons-store {
float: left;
margin-left: 20px;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
.button-call{
background-color: #464646;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
}
.button-email{
background-color: #170b0b;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
margin-left: 4px;
}
#column-margin-top {
margin-top: 20px;
margin-bottom: 20px;
}
#properties-list {
margin-bottom: 30px;
}
.property-store-container {
height: auto;
width: 100%;
}
/*-- //footer --*/
#footer-real-estate{
background-color: #464646;
height: 15%;
}
#visit-our-store-heading, #contact-a-specialist-heading{
color: #f5f5f5;
} <!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/dummy.css" rel="stylesheet">
<!-- FontAwesome icon fonts -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<!-- Custom Theme files -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<link href="css/fasthover.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- Website Logo -->
<link rel="icon" href="assets/img/KS%20Large.jpg">
<!-- Animate.css -->
<link href="assets/css/animate.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="properties-list" >
<div class="container ">
<div class="property-list-container">
<div class="row">
<div class="col-sm-10">
<div class="col-sm-8">
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<!--
<div id="column-margin-top" class="col-sm-4">
Pages
</div>
<div id="column-margin-top" class="col-sm-8">
<i class="fa fa-forward"></i>
<i class="fa fa-arrow-left"></i>
1 2 3 4 5
<i class="fa fa-arrow-backward"></i>
<i class="fa fa-arrow-right"></i>
</div>
-->
</div>
</div>
<aside class="col-sm-2">
<br>
<div id="rectangle">
<div class="col-sm-4 search-rectangle" id="search-rectangle">
<i id="search" class="fa fa-search"></i>
</div>
<div class="col-sm-8" id="search-here-rectangle">
<input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
</div>
</div>
<br>
<br>
<h3>Categories</h3>
<input type="checkbox" name="categories" value="Duplex">Duplex
<br>
<input type="checkbox" name="categories" value="Duplex">Apartments
<br>
<input type="checkbox" name="categories" value="Duplex">Townhouses
<br>
<input type="checkbox" name="categories" value="Duplex">Detached Houses
<br>
More...
<h3>Room</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Bath</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Price</h3>
<input type="checkbox" name="room" value="1">RM 500 - RM 1000
<br>
<input type="checkbox" name="room" value="2">RM 1000 - RM 1500
<br>
<input type="checkbox" name="room" value="3">RM 1500 - RM 2000
<br>
<input type="checkbox" name="room" value="4">RM 2000 - RM 2500
<br>
<h3>Purpose</h3>
<input type="checkbox" name="room" value="1">Purchase
<br>
<input type="checkbox" name="room" value="2">Rent
</aside>
</div>
</div>
</div>
</section>
<!-- FOOTER
=================================================== -->
<section id="footer-real-estate">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">MENU</h4>
<h4 id="visit-our-store-heading">BLOG / CONTACTS / AGENTS</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">CONTACT</h4>
<h4 id="visit-our-store-heading">148, KUALA LUMPUR</h4>
<h4 id="visit-our-store-heading">MALAYSIA</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">SOCIAL</h4>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-linkedin"></i>
<h5 class="copy">© Md. Ehsanul Haque Kanan</h5>
</div>
</div>
</div>
</div>
</section>
解决方案
我已经尝试稍微修改您的结构。这样，至少已经创建了一些基本的布局结构。它不完整，但包含要遵循的布局。请完成它，然后您也可以添加额外的元素。
#properties-image {
height: 25%;
}
#properties-list {
background-color: #c0c0c0;
}
.property-list-container {
padding-top: 20px;
}
#font-awesome-icons-store-first {
float: left;
}
#font-awesome-icons-store {
float: left;
margin-left: 20px;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
.button-call {
background-color: #464646;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
}
.button-email {
background-color: #170b0b;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
margin-left: 4px;
}
#column-margin-top {
margin-top: 20px;
margin-bottom: 20px;
}
/* #properties-list {
margin-bottom: 30px;
} */
.property-store-container {
height: auto;
width: 100%;
}
/*-- //footer --*/
#footer-real-estate {
background-color: #464646;
height: 15%;
}
#visit-our-store-heading,
#contact-a-specialist-heading {
color: #f5f5f5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container ">
<div class="page-wrapper" style="
/* padding: 20px; */
">
<section id="properties-list">
<div class="property-list-container" style="
background-color: #c0c0c0;
padding: 40px;
">
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg" class="img-responsive">
<h4>RM 1500</h4>
<div id="property-content">
<p> Platinum Splendor, Putra Jaya Apartment</p>
<div class="row">
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
</div>
<p> Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<div class="text-center">
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg" class="img-responsive">
<h4>RM 1500</h4>
<div id="property-content">
<p> Platinum Splendor, Putra Jaya Apartment</p>
<div class="row">
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
</div>
<p> Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<div class="text-center">
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg" class="img-responsive">
<h4>RM 1500</h4>
<div id="property-content">
<p> Platinum Splendor, Putra Jaya Apartment</p>
<div class="row">
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
<div class="col-xs-4"> <i class="fa fa-search"> 3 </i></div>
</div>
<p> Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<div class="text-center">
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
</div>
<!--
<div id="column-margin-top" class="col-sm-4">
Pages
</div>
<div id="column-margin-top" class="col-sm-8">
<i class="fa fa-forward"></i>
<i class="fa fa-arrow-left"></i>
1 2 3 4 5
<i class="fa fa-arrow-backward"></i>
<i class="fa fa-arrow-right"></i>
</div>
-->
</div>
</div>
<aside class="col-sm-2">
<br>
<div id="rectangle">
<div class="col-sm-4 search-rectangle" id="search-rectangle">
<i id="search" class="fa fa-search"></i>
</div>
<div class="col-sm-8" id="search-here-rectangle">
<input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
</div>
</div>
<br>
<br>
<h3>Categories</h3>
<input type="checkbox" name="categories" value="Duplex">Duplex
<br>
<input type="checkbox" name="categories" value="Duplex">Apartments
<br>
<input type="checkbox" name="categories" value="Duplex">Townhouses
<br>
<input type="checkbox" name="categories" value="Duplex">Detached Houses
<br> More...
<h3>Room</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Bath</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Price</h3>
<input type="checkbox" name="room" value="1">RM 500 - RM 1000
<br>
<input type="checkbox" name="room" value="2">RM 1000 - RM 1500
<br>
<input type="checkbox" name="room" value="3">RM 1500 - RM 2000
<br>
<input type="checkbox" name="room" value="4">RM 2000 - RM 2500
<br>
<h3>Purpose</h3>
<input type="checkbox" name="room" value="1">Purchase
<br>
<input type="checkbox" name="room" value="2">Rent
</aside>
</div>
</div>
</section>
<section id="footer-real-estate">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">MENU</h4>
<h4 id="visit-our-store-heading">BLOG / CONTACTS / AGENTS</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">CONTACT</h4>
<h4 id="visit-our-store-heading">148, KUALA LUMPUR</h4>
<h4 id="visit-our-store-heading">MALAYSIA</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">SOCIAL</h4>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-linkedin"></i>
<h5 class="copy">© Md. Ehsanul Haque Kanan</h5>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- FOOTER
=================================================== -->
<script type="text/javascript">
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>推荐阅读
- azure - Azure Kubernetes Pods 中的 Consul quorum（3 个 consul 服务器）
- javascript - Gatsby 的客户端路由 - 我的客户端渲染页面仍然受益于 Gatsby 的哪些功能？
- html - 手风琴切换图标不可见
- python-3.x - 如何将 Telegram 机器人的使用限制为仅限某些用户？
- javascript - 未捕获的类型错误：在 Chrome 控制台中运行 JavaScript 时无法读取 null 的属性“子项”
- spring-boot - Flyway 6 JavaMigrations with Native Dependency Injection for Spring Beans
- sql - SQL Server 中的字符填充
- php - 如何使用 PHP 从 URL 中获取值？
- google-cloud-platform - 数据流用例（小型 SQL 查询）
- google-visualization - 谷歌水平条形图注释重叠 vAxis