html - 响应式网站布局

Question

请参阅此页面:serenitygardenrooms.com/canopy

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

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

我想让菜单靠得更近，但我能看到的唯一方法是删除填充并将表单留出更大的空间。理想情况下，这看起来像 1 个大部分，但实际上保留为 2 个部分，以便调整大小以适应它将堆叠的较小设备。

这是我的:

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

Answer 1

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

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

.wrapper {
  background: #000;
}

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