0

我有一个网页，在页面加载时显示一个下拉框，旁边有一个提交按钮。根据用户从下拉列表中选择的选项，我进行 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>

到目前为止我已经尝试过：

我已经将前两个下拉菜单的跨度从 span3 增加到 span4 并且有效。但是当页面最初显示时，按钮离第一个下拉菜单超级远。有没有我想念的更简单的方法来做到这一点？

谢谢。

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

必须做一个警报语句/console.log，因为 ajax 不会更新页面上的实际代码......

4

1 回答 1

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应该是一个带有 class 的元素.spanX，这意味着你不能拥有你<button>的跨度的兄弟
  2. 由于.spanX元素即使是空的也会占据它们指定的宽度，因此按钮将始终远离第一个选择，除非您.span3使用 ajax 回调动态附加第二列和第三列

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

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

并会动态附加包装在其列中的其他选择

看演示

于 2013-08-07T20:23:44.330 回答