Question

我正在尝试创建嵌套注释。当我不使用bootstrap网格系统时，它很好。但是我现在正在使用网格系统，因为我有一个图像和一个面板，我想要保持在同一行，并且行变得混乱。

This小提琴显示我希望它看起来如何（它没有上下箭头）。

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;
}

基本上我希望它看起来像是在链接的第一个小提琴中，但是在面板的左边有向下和向上箭头，我无法这样做。

就像bootstrap想要将下一个嵌套注释放在同一行中一样。

任何帮助？

编辑：我修复了小提琴链接，不要改变小提琴，因为这就是我想要的样子

编辑：根据bootstrap documentation，嵌套行必须在列内。我尝试在标签内包装所有子元素div class =“row comment root”id =“1”，这没有帮助。我想要嵌套行的原因是因为我希望注释对象在同一行中有两个图像和一个面板。然后我想在内部嵌套注释（在该注释的左侧缩进），同时使用img标签和同一行中的面板。

Answer 1

在开始新行之前，您缺少结束</div>标记更新了小提琴：https://jsfiddle.net/9d8obcd1/2/

Answer 2

这是有效的：

@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.

    int id = item.getItemId();

    //item.setChecked(true); //Won't work, will leave previous item checked too.
    navigationView.setCheckedItem(id); //this will check single item

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

与问题中的css相同

使用bootstrap嵌套嵌套注释的行

2 个答案: