在响应网页中放置提交按钮时出现问题

Question

我有一个网页，加载页面时会显示一个下拉框，旁边有一个提交按钮。根据用户从下拉框中选择的选项，我会调用ajax，如果返回数据，我会显示另一个包含更多选项的下拉列表。我这样做了2次，所以总共可以在页面上并排放置3个下拉列表。一直以来，提交按钮都应该位于显示的最后一个下拉框的右侧。

问题：

根据我用来浏览网站的移动设备，即使这一行有足够的空间，提交按钮也会与第一个下拉框重叠。当第二个下拉列表出现时，同样的事情也会发生。如何确保无论设备如何，提交按钮最初总是出现在第一个下拉列表旁边？

代码：

我只显示HTML。。。但是ajax都可以工作。ajax代码只是在每个div标记中添加选择框。

<div class="row-fluid">
        <div class="span12" id="l1locations">
            <h2><?php echo $title;?></h2>
            <div class="span3">
                    <h4>Branch:</h4>
                    <select name='L1Locations' id='L1Locations'>
                        <option selected value''></option>
                        <?php
                            foreach ($branches as $key=>$value)
                            {
                                echo '<option value="'.$key.'">'.$value."</option>";
                            }
                        ?>
                    </select>   
            </div>
            <div class="span3" id="l2locations"></div>
            <div class="span4" id="l3locations"></div>
            <h4>&nbsp;</h4>
            <button class="btn search">Search</button>
        </div>
</div>

到目前为止我尝试了什么：

在前两个下拉菜单中，我将跨度从跨度3增加到了跨度4，这很有效。但当页面最初显示时，按钮离第一个下拉菜单非常远。有没有一种更简单的方法可以做到我所缺少的？

谢谢。

编辑1

下面是一些显示渲染HTML的代码。。。填充第一个下拉菜单，提交按钮与之重叠：

<div class="container-fluid" id="locationsbar">         
    <div class="row-fluid">
            <div class="span12" id="l1locations">
                <h2>Show Location:</h2>
                <div class="span3">
                        <h4>Branch:</h4>
                        <select name='L1Locations' id='L1Locations'>
                            <option selected value''></option>
                            <option value="185">Loc1</option><option value="63">Loc2</option><option value="198">Loc3</option><option value="197">Loc4</option><option value="196">Loc5</option><option value="110">Loc6</option><option value="8">Loc7</option></select>   
                </div>
                <div class="span3" id="l2locations"></div>
                <div class="span4" id="l3locations"></div>
                <h4>&nbsp;</h4>
                <button class="btn search">Search</button>
            </div>
    </div>
    <!-- DISPLAY RESULTS -->
    <div class="row-fluid">
                <div class="span12 visible-desktop visible-tablet" id="l1locations">
                        <table id="switchrecords" name="switchrecords" class="table table-bordered">
                        </table>
                </div>
                <div class="span12 visible-phone" id="l1locations">
                        <div id="mobileswitchrecords">
                        </div>
                </div>              
    </div>
</div>

编辑2

以下是通过ajax生成的用于填充第二个下拉列表的html：

子位置1:AllB1B2B124B97B89

由于ajax没有更新页面上的实际代码，所以不得不执行警告语句/console.log。。。

Answer 1

我想你的标记看起来像这个

<div class="row-fluid">
    <div class="span3" id="L1Locations">
        <h4>Branch:</h4>
        <select name='L1Locations'>
            <option selected value=''></option>
        </select>
    </div>
    <div class="span3" id="L2Locations">
        <h4>Branch:</h4>
        <select name='L2Locations'>
            <option selected value=''></option>
        </select>
    </div>
    <div class="span3" id="L2Locations">
        <h4>Branch:</h4>
        <select name='L2Locations'>
            <option selected value=''></option>
        </select>
    </div>
    <button class="btn search">Search</button>
</div>

尝试将其添加到您的CSS 中

@media (min-width: 768px) {
    #L1Locations, #L2Locations, #L3Locations {
        float: none;
        display: inline-block;
        margin: 0;
        width: auto;
        text-align: left;
    }
    .row-fluid {
        text-align: center;
    }
    select {
        margin: 0;
    }
}

这将使所有列只占其内容的宽度，并通过使用display:inline-block;而不是浮点来并排显示在大屏幕上（>=768px）。小型设备的行为不受影响，Bootstrap使小型设备中的所有列都像块元素一样（占用其容器的全部）

有3个选择的演示

带有1个选择的演示

更新

作为对您评论的回应，您可以使用默认的Bootstrap网格系统获得类似的效果，但您需要做两件事：

1. 修复您的标记，当您想要嵌套行时，您需要在列中包含另一个<div class="row-fluid">，而且.row-fluid的每个直接后代都应该是类为.spanX的元素，这意味着您不能将<button>作为跨度的同级
2. 由于.spanX元素即使为空也会占用其指定的宽度，因此按钮将始终远离第一个选择，除非您使用ajax回调动态附加第二列和第三列.span3

所以你会把它作为你的初始标记

<div class="row-fluid">
    <div class="span12">
        <h2>My title</h2>
        <div class="row-fluid"> <!--You need to define a nested row-->
            <div class="span3" id="L1Locations">
                <h4>Branch:</h4>
                <select name='L1Locations'>
                    <option selected value=''></option>
                </select>
            </div>
            <div class="span3">
                <h4>&nbsp;</h4>
                <button class="btn search">Search</button>
            </div>
        </div>
    </div>
</div>

并且将动态地附加在它们的列中包装的其他选择

请参阅演示