html - 使用 bootstrap 嵌套评论的嵌套行

Question

我正在尝试创建嵌套评论。当我不使用 Bootstrap 网格系统时，它很好。但我现在正在使用网格系统，因为我有一个图像和一个面板，我想将它们放在同一行中，但这些行越来越乱了。

This fiddle 显示了我希望它的外观(它只是没有向上和向下箭头)。

This是网格系统的样子，并且变得一团糟。

这是 html:

<div class = "container">
    <div class="col-md-12>
    <div class="row comment root" id="1"> 
        <div  class="col-xs-1 arrows-block">
            <div class="pull-right">
                <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                <img src="http://www.lowcountryren.com/nestor/Documentation/ionicons-1.4.1/png/512/arrow-down-b.png" name="down" class="img-responsive resize">
            </div> <!-- pull right -->
        </div><!-- col -->
        <div class="col-xs-11">
            <div class="panel panel-default">
                <div class="panel-heading">
                  username 1
                </div>
                <div class="panel-body">
                  text 1
                </div>
                <div class="panel-footer">
                    <ul class="list-inline">
                        <li><a class="reply" href="javascript:void(0)">reply</a></li>
                        <li><a class="expand" href="javascript:void(0)"> expand</a></li>
                        <li><a class="delete" href="javascript:void(0)"> delete</a></li>
                        <li><a class="edit" href="javascript:void(0)"> edit</a></li>
                    </ul>
                </div><!-- footer -->
           </div><!-- panel-->
    </div><!-- col -->
    <div class="row comment root" id="1">
        <div  class="col-xs-1 arrows-block">
            <div class="pull-right">
                <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                <img src="http://www.lowcountryren.com/nestor/Documentation/ionicons-1.4.1/png/512/arrow-down-b.png" name="down" class="img-responsive resize">
            </div>
        </div><!-- col -->
        <div class="col-xs-11">
            <div class="panel panel-default">
                <div class="panel-heading">
                  username 2
                </div>
                <div class="panel-body">
                    reply 1
                </div>
                <div class="panel-footer">
                    <ul class="list-inline">
                        <li><a class="reply" href="javascript:void(0)">reply</a></li>
                        <li><a class="expand" href="javascript:void(0)"> expand</a></li>
                        <li><a class="delete" href="javascript:void(0)"> delete</a></li>
                        <li><a class="edit" href="javascript:void(0)"> edit</a></li>
                    </ul>
                </div><!-- footer -->
            </div><!-- panel -->
        </div><!-- col -->
      </div><!-- comment -->
    </div><!-- comment -->
    </div> <!-- big col -->
   </div> <!-- container -->

和CSS:

    .comment{
    margin-left: 50px;
}

.resize{
    width:40px;
    height: auto;
}


.col-xs-1{
    padding-right: 0px;
    width: 4%;
}

.col-xs-11{
    padding-left: 0px;
}

.root{
    margin-left: 0px;
}

.arrows-block{
    padding-left: 0px;
}

基本上我希望它看起来像链接到的第一个 fiddle ，但面板左侧有向下和向上箭头，但我无法这样做。

就好像 bootstrap 想把下一个嵌套的评论放在同一行。

有什么帮助吗？

编辑:我修复了 fiddle 链接，不要更改 fiddle ，因为那是我想要的样子

编辑:根据 bootstrap documentation嵌套行需要在列内。我尝试将所有子元素 div class="row comment root"id="1"包装在标签内，但这没有帮助。我想要嵌套行的原因是因为我想要一个评论对象在同一行中有两个图像和一个面板。然后我想在里面有一个嵌套的评论(缩进到评论的左边)也有 img 标签和一个面板在他们自己的同一行。

Answer 1

您缺少结尾 </div>在开始新行之前标记更新 fiddle :https://jsfiddle.net/9d8obcd1/2/