Question

请参阅此页：serenitygardenrooms.com/canopy

我正在努力实现以下目标：

包含下拉菜单的div与图像周围的黑框保持完全相同的大小。

我想让菜单更紧密，但我能看到的唯一方法是删除填充并将表单空间放大。理想情况下，这看起来像一个大的部分但实际上仍然是2，用于调整它将堆叠的较小设备。

这就是我所拥有的：

＆＃13;

    <section id="canopy" class="maincolorbg">
    <div class="container">
    <div class="starter-template">
        <h1>Step 1</h1>

        <div class="smallsep">
        </div>
        <p class="lead">
            Please select your garden room design
        </p>
    </div>
    <div class="row">
    <div class="col-md-6 col-md-offset-1 range-item nopadding">
        <section class="flexslider fullbg wow bounceIn animated" id="spritespin" 
    data-wow-delay="0.3s"
                 data-wow-duration="2s"
                 style="padding: 0px;display: none" name="spritespin">
            <div id="spritespin"></div>
        </section>
        <section class="flexslider fullbg wow bounceIn animated" id="canopy- 
    slider" data-wow-delay="0.3s"
                 data-wow-duration="2s"
                 style="padding: 0px;" name="canopy-slider">
            <ul class="slides">

            </ul>
        </section>
    </div>
    <div class="col-md-6 range-item nopadding">
        <div class="thumbnail wow bounceIn animated" data-wow-delay="0.3s" data- 
    wow-duration="2s">
            <div class="caption" style="padding:10px 20px 12px;line- 
    height:60px;">
                <div><h2></br>The Canopy</h2></div>

                <p>
                    Please select your size:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">
                    </div>
                    <select id="size" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="8*8">8' x 8'</option>
                        <option value="12*8">12' x 8'</option>
                        <option value="16*12">16' x 12'</option>
                        <option value="20*12">20' x 12'</option>
                        <option value="24*12">24' x 12'</option>
                    </select>
                </div>
                <p>
                    Please select your cladding style:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="claddingStyle" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="gap">Shadow Gap</option>
                        <option value="tongue">Tongue and Groove</option>
                    </select>
                </div>
                <p>
                    Please select your cladding direction:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="claddingDirection" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="horizontal">Horizontal</option>
                        <option value="vertical">Vertical</option>
                    </select>
                </div>
                <p>
                    Please select your door style:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="doorStyle" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="standard">Standard</option>
                        <option value="corner">Corner Style</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    </div>

＆＃13;

Answer 1

您可以设置您可以关注的那一行.range-item div的相同高度Bootstrap equal-height columns experiment

或者您可以将该行包装在一个div中并将该div的背景颜色设置为＃000，这样用户就无法看到两个div的高度差异，如下所示：

＆＃13;

.wrapper {
  background: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<section id="canopy" class="maincolorbg">
<div class="container">
<div class="starter-template">
    <h1>Step 1</h1>

    <div class="smallsep">
    </div>
    <p class="lead">
        Please select your garden room design
    </p>
</div>
<div class="wrapper">
    <div class="row">
        <div class="col-md-6 col-md-offset-1 range-item nopadding">
            <section class="flexslider fullbg wow bounceIn animated" id="spritespin" 
        data-wow-delay="0.3s"
                     data-wow-duration="2s"
                     style="padding: 0px;display: none" name="spritespin">
                <div id="spritespin"></div>
            </section>
            <section class="flexslider fullbg wow bounceIn animated" id="canopy- 
        slider" data-wow-delay="0.3s"
                     data-wow-duration="2s"
                     style="padding: 0px;" name="canopy-slider">
                <ul class="slides">

                </ul>
            </section>
        </div>
        <div class="col-md-6 range-item nopadding">
            <div class="thumbnail wow bounceIn animated" data-wow-delay="0.3s" data- 
        wow-duration="2s">
                <div class="caption" style="padding:10px 20px 12px;line- 
        height:60px;">
                    <div><h2></br>The Canopy</h2></div>

                    <p>
                        Please select your size:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">
                        </div>
                        <select id="size" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="8*8">8' x 8'</option>
                            <option value="12*8">12' x 8'</option>
                            <option value="16*12">16' x 12'</option>
                            <option value="20*12">20' x 12'</option>
                            <option value="24*12">24' x 12'</option>
                        </select>
                    </div>
                    <p>
                        Please select your cladding style:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="claddingStyle" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="gap">Shadow Gap</option>
                            <option value="tongue">Tongue and Groove</option>
                        </select>
                    </div>
                    <p>
                        Please select your cladding direction:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="claddingDirection" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="horizontal">Horizontal</option>
                            <option value="vertical">Vertical</option>
                        </select>
                    </div>
                    <p>
                        Please select your door style:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="doorStyle" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="standard">Standard</option>
                            <option value="corner">Corner Style</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

最好在手机屏幕上制作这样的中心。

在内部媒体查询中添加此css

@media only screen and (max-width: 767px) {
    .nav.navbar-nav {
        text-align: center;
        float: none !important;
    }
}

Answer 3

您应该使用bootstrap form-control类来实现下拉菜单。

响应式网站布局

3 个答案: