引导表布局答案

【问题标题】：Bootstrap table layout引导表布局
【发布时间】：2016-10-12 07:37:09
【问题描述】：

我正在尝试使用 Bootstrap 3 实现下图所示的设置，但我找不到实现它的方法，尤其是让它保持响应。我查看了面板和表格等，但到目前为止效果并不理想。

【问题讨论】：

你添加类 table-responsive ?
你有没有尝试过？显示您的 HTML/CSS。

标签： css user-interface twitter-bootstrap-3

【解决方案1】：

最后我想通了。只是稍微弄乱了面板中的行。

<div class="panel-group" id="accordion" role="tablist">

    <div class="panel panel-default container-fluid">
        <div class="row panel-heading ">
            <div class="col-sm-1 pull-left"></div>
            <div class="col-sm-4 col-xs-12">Asset ID</div>
            <div class="col-sm-2 col-xs-12">Status</div>
            <div class="col-sm-2 col-xs-12">Asset Nodes</div>
            <div class="col-sm-3 col-xs-12">Manage</div>
        </div>
    </div>

    <div class="panel panel-default container-fluid">
        <div class="panel-heading row" role="tab" id="headingOne">
            <div class="col-xs-1">
                <div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div>

            </div>
            <div class="col-sm-4 col-xs-12">
                <a href="#">xxx</a>
            </div>
            <div class="col-sm-2 col-xs-12">Normal</div>
            <div class="col-sm-2 col-xs-12">?</div>
            <div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                dsfsdfd
            </div>
        </div>
    </div>

</div>

http://www.bootply.com/NLxmcWu4SJ

【讨论】：