Question

Dropdown1和Dropdown2必须向右浮动。分页必须在右边。分页内容可能会减少，而dropdown1和2必须相应地进行调整。我尝试了不同的方法，但无法得到解决方案。在移动设备中，所有三个div都必须居中。

enter image description here

我们正在使用bootstrap。 Div如下

<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">



                  <!-- Title -->

        </div>

    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">

            <div style="float:right">

                <ul class="nav">

                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="sortby">Drop Down 2<b class="caret"></b></a>
                        <ul class="dropdown-menu " style="text-transform:uppercase;">
                            <li data-filterkind="$p" data-filtervalue="DESC">
                                <a href="./" >1</a>
                            </li>
                            <li data-filterkind="$p" data-filtervalue="ASC">
                                <a href="./" >2</a>
                            </li>
                        </ul>
                    </li>

                </ul>

            </div>
            <div class="pull-right">
               <!-- Drop down 2 -->
            </div>
        </div>


            </div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">

            <div style="float:right" >

                  <!-- Pagination -->
            </div>
        </div>
        </div>

请建议

Answer 1

那么这样吗？

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center heading1">
            <p> Heading </p><!-- Heading -->
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="float text-center">
                    <div class="col-sm-4">
                        <p> DD1</P><!-- Drop down 1 -->
                    </div>
                    <div class="col-sm-4">  
                        <p> DD2</P><!-- Drop down 2 -->     
                    </div>
                    <div class="col-sm-4">  
                        <p> PAGINATION</P><!-- pagination -->       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后将以下附加内容添加到您的自定义CSS：

@media (min-width: 768px) 
{
    .float
        {
            float: right;
        }
    .heading1
        {
            text-align: left;
        }
}

仅供参考 - 以上是bootstrap，但需要额外的类才能获得您想要的自定义结果。

并排的三个div，向右浮动并响应

1 个答案: