html - 如何让图像显示在面板的左侧(都在同一行)

Question

为什么箭头图像进入面板？我将箭头图像放入它们自己的列中，但它们与面板相交。 当我给面板自己的列时，图像不会与它相交，但图像和面板之间的间隙太大。如何让箭头图像显示在面板左侧的同一行中？

<div class="row comment" id="1">
            <div  class="col-xs-1">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize">
            </div>
            <div >
                <div class="panel panel-default">
                    <div class="panel-heading">
                        user
                    </div>
                    <div class="panel-body">
                        text
                    </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>
                </div>
            </div>
        </div>

CSS:

.comment{
    margin-left: 50px;
}

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

这是一个fiddle . 这是我想要的样子:fiddle 我不能使用此解决方案，因为我需要整行都具有注释 css 规则，该规则为其提供 50px 的左边距，因为我将在子注释中包含许多子注释。

Answer 1

您可以将箭头放在网格 1 中，将面板的其余部分放在其余网格中。 这将在同一行中包含箭头和面板。

.comment{
    margin-left: 50px;
}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row comment" id="1">
            <div  class="col-xs-1 arrows-block">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize">
            </div>
            <div class="col-xs-11" >
                <div class="panel panel-default">
                    <div class="panel-heading">
                        user
                    </div>
                    <div class="panel-body">
                        text
                    </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>
                </div>
            </div>
        </div>