Question

我正在为网站使用twitter bootstrap，基本上我在div元素中有一个订单列表。当屏幕调整大小为768px时，我想要父级的div宽度，均匀分布在所有子列表中。

我是否需要使用媒体查询和JavaScript？任何人都可以帮我开始使用这个概念吗？代码可能如下所示 -

<div class="row">
        <div class="col-xs-12 col-sm-8 col-md-7 col-lg-9 pull-right process-tab">
            <ol class="investment-pagination c-white pull-right process-tab-bar">
                <li data-tab-target="goalName" class="active">1</li>
                <li data-tab-target="amountTerm">2</li>
                <li data-tab-target="riskLevel">3</li>
                <li data-tab-target="investment">4</li>
                <li data-tab-target="accountType">5</li>
                <li data-tab-target="fund">6</li>
            </ol>
        </div>
    </div>

编辑： bootply.com/ibnLAYxmbB

Answer 1

您的父母col-xs-12不是col-xs-6。所以，先解决这个问题。
为max-width: 768px
将ol设为display: table
将li设为display:table-cell，然后移除float和width

实际上，你的CSS看起来像这样：

@media screen and (max-width: 768px) {
  .investment-pagination { display: table; width: 100%; }
  .investment-pagination li { display: table-cell; width: auto; float: none; }

}

演示：http://bootply.com/CRMNgpsjMV

如何在子元素

1 个答案: