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>

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

前两个下降时间我已经从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：

Sub Loc 1：AllB1B2B124B97B89

不得不做一个警告声明/ console.log，因为ajax不会更新页面上的实际代码......

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;而不是浮点数在大屏幕（＆gt; = 768px）上并排显示。小型设备中的行为不受影响，Bootstrap使小型设备中的所有列都像块元素一样（充分利用其容器）

<强> Demo with 3 selects

<强> Demo with 1 select

<强>更新

在回复你的评论时，你可以使用默认的Bootstrap网格系统获得类似的效果，但你需要做两件事：

修复您的标记，当您想要嵌套行时，您需要在列中添加另一个<div class="row-fluid">，同时.row-fluid的每个直接后代都应该是类.spanX的元素，这意味着你不能让你的<button>成为你跨越的兄弟姐妹
由于.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>

并动态附加其列中包含的其他选择

<强> See demo

将提交按钮放在响应式网页中的问题

1 个答案: