html - 三个 div 并排向右浮动且响应迅速

Question

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

我们正在使用 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 ，但需要额外的类才能获得您想要的自定义结果。