Bootstrap Problema del botón: botones que se desorganizan, no se pueden colocar uno al lado del otro
Estoy trabajando en un proyecto de sitio web inmobiliario. Ya he creado la plantilla de Photoshop y la he subido a Behance. @https: //www.behance.net/csc103falld84
Ahora mismo, estoy creando la versión estática de la plantilla de la tienda de bienes raíces. Estoy enfrentando un problema. No puedo mantener los botones uno al lado del otro. Lo he intentado lo mejor posible. Pero no puedo alinearlos correctamente uno al lado del otro. Por favor, eche un vistazo a esta imagen para darse cuenta del problema:https: //drive.google.com/open? id = 1ZEaVUx9LhakYUhgedZYgfzIrjj22zEU1
Aquí está el código HTML:
<html>
<head>
<title>Kanon's Smartphone Store</title>
<!-- 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>
</head>
<body>
<section id="right-property">
<!-- HEADER
=================================================== -->
<header class="site-header" role="banner">
</header>
<div class="container property-store-container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="proterties-h2-p">
<h3 id="properties-h2">Luxurious Apartments in Malaysia</h3>
<p id="properties-p">Starting from RM 2000</p>
</div>
</div><!-- end col -->
</div><!-- row -->
</div><!-- container -->
</section>
<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-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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 class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="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-md-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>
Aquí están los códigos CSS:
.property-store-container {
height: auto;
width: 100%;
}
#proterties-h2-p {
margin-bottom: 400px;
}
#properties-image {
height: 25%;
}
img.properties-image{
display:block;
width: 100%;
height: 30%;
margin:0 auto;
}
#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%;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
/*-- //footer --*/
#footer-real-estate {
background-color: #464646;
height: 15%;
}
#visit-our-store-heading,
#contact-a-specialist-heading {
color: #f5f5f5;
}
</body>
</html>
Aquí está el enlace CodePen.io:https: //codepen.io/kanan292/pen/WKdrR
Me apasiona la codificación. Realmente necesito tu ayuda para completar este proyecto. Entonces podré avanzar en el desarrollo de backend con WordPress o Django o ASP.NET Core.
Esperando obtener una gran solución de su parte.