Bootstrap按钮问题：按钮杂乱无章，无法并排放置

博士埃哈努尔·哈克·卡南

我正在从事房地产网站项目。我已经创建了Photoshop模板并将其上传到Behance。https://www.behance.net/csc103falld848

现在，我正在创建房地产商店模板的静态版本。我面临一个问题。我不能将按钮并排放置。我已经尽力了。但是我不能将它们并排对齐。请查看以下图片以了解问题所在：https : //drive.google.com/open?id=1ZEaVUx9LhakYUhgedZYgfzIrjj22zEU1

这是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">&copy; Md. Ehsanul Haque Kanan</h5>


                        </div>
                </div>
                    </div>
                    </div>


            </section>

这是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>

这是CodePen.io链接：https ://codepen.io/kanan292/pen/WKdrRP

我真的很喜欢编码。我真的需要您的帮助才能完成此项目。然后，我将能够使用WordPress或Django或ASP.NET Core进行后端开发。

期待从您那里得到一个很好的解决方案。

Buu97

尝试将按钮包装在div中

<div>
    <button class="button-call">Call</button>
    <button class="button-email">Email</button>
</div>

按钮是嵌入式标签，因此它们与您之前放置的文本对齐。div将它们放置在另一行中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-12-5

我来说两句

0 条评论

登录后参与评论

上一篇：当找不到图片时，启动Spyder和JupyterNotebook会导致importError

Bootstrap按钮问题：按钮杂乱无章，无法并排放置

Bootstrap按钮问题：按钮杂乱无章，无法并排放置

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何正确比较 scala.xml 节点？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

在令牌内联程序集错误之前预期为 ')'

数据表中有多个子行，asp.net核心中来自sql server的数据

VBA 自动化错误：-2147221080 (800401a8)

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何在JavaScript中获取数组的第n个元素？

检查嵌套列表中的长度是否相同

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

ES5的代理替代

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

如何监视应用程序而不是单个进程的CPU使用率？

如何检查字符串输入的格式

解决类Koin的实例时出错

如何自动选择正确的键盘布局？-仅具有一个键盘布局