Question

我试图让我的两个背景的高度相同。我不希望高度由内容设置。这是我的代码如下。目前，在编写代码时，两个容器是不均匀的。我怎样才能制作完全相同的高度？

<!-- Consultation -->
<div id="consultation">
    <div class="container">
        <h1><strong>ASK US</strong></h1>
        <hr>

        <div class="row">
            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php"                     class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-  label">Name</label>
                            <input type="text" class="form-control input-md"    id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->
    </div> <!-- end container-fluid -->
</div> <!-- end consultation -->

这是我的CSS

 #consultation {
 background: url('../img/summit.jpg') no-repeat center center fixed;
 background-size: 100% auto;
 color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#consultation h1 {
color: #282828;
text-align: center;
}

#consultation .col-md-6 {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
border-radius: 18px;
padding-top: 40px;
padding-bottom: 60px;
padding-left: 35px;
padding-right: 35px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;
}

Answer 1

您也可以将此语句添加到.con-padded类

height:200px;

这将设置两者的高度。

Answer 2

只需将此内联css与任何元素一起使用即可设置其高度。 style="height:200px"

我希望它可以帮助你

＆＃13;

#consultation {
 background: url('../img/summit.jpg') no-repeat center center fixed;
 background-size: 100% auto;
 color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#consultation h1 {
color: #282828;
text-align: center;
}

#consultation .col-md-6 {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
border-radius: 18px;
padding-top: 40px;
padding-bottom: 60px;
padding-left: 35px;
padding-right: 35px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;
}

＆＃13;

<div class="col-sm-6" style="height:200px">
<div class="con-padded">
                <form name="contactform" method="post" action="index.php"                     class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-  label">Name</label>
                            <input type="text" class="form-control input-md"    id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-sm-6" style="height:200px">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->
    </div> <!-- end container-fluid -->
</div> <!-- end consultation -->

＆＃13;

Answer 3

Give same class name (equalHight) to both column and add this code
i hope its help you

heights = $(".equalHight").map(function() {
                return $(this).height();
            }).get(),
            maxHeight = Math.max.apply(null, heights);
            $(".equalHight").height(maxHeight);

注意：主要使用此代码，将高度设置为最高（具有相同的类名）的所有

Bootstrap列框的相等高度

3 个答案: