如何在子元素之间分配父元素的宽度答案

【问题标题】：How to distribute parent element's width among child element如何在子元素之间分配父元素的宽度
【发布时间】：2016-02-03 11:27:28
【问题描述】：

我正在为一个网站使用 twitter 引导程序，基本上我在 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

【问题讨论】：

你能做一个演示，展示你到目前为止所做的事情，并向我们展示你的尝试吗？
该站点不在实时服务器上。无论如何我可以添加屏幕截图吗？
截图用处不大...试试Bootply.com
这里是链接伙伴 - bootply.com/ibnLAYxmbB
所以当屏幕尺寸调整大小时，我非常希望每个 li 从其父 div 获得相等的宽度（在这种情况下，col-xs-12，我认为是 768px）

标签： javascript jquery css twitter-bootstrap responsive-design

【解决方案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

【讨论】：