javascript - 如何在子元素之间分配父元素的宽度

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

1. 您的父级不是 col-xs-12，而是 col-xs-6。所以，首先解决这个问题。
2. 添加媒体查询 max-width: 768px
3. 将您的ol设置为display: table
4. 将 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