Question

我正在使用Bootstrap按钮组，并且当按钮跨越多行时，其外观和感觉都存在问题。请参阅附件：

如您所见，第二行中的按钮没有正确的左边框。第二行不是表行，而是发生溢出时浮动在其下方的按钮元素。

有什么办法可以在CSS中处理它？任何解决方案或提示将不胜感激。

编辑

源代码：

<div id="ReportsButtonGroup" Class="btn-group btn-group-sm " style="padding-top:15px;height:85px;overflow:hidden;">

                    <a class="btn btn-default smallBottomMargin "
                       href="javascript:void(0)"
                       title="View Slides">
                        <img src="/Content/images/Edit.png" height="20" width="20" />
                    </a>

                    <a class="smallBottomMargin btn btn-default"
                       href="javascript:void(0)"
                       title="Start a Poll using this Template">
                        <img src="/Content/images/Polling.png" height="20" width="20" />
                    </a>


                    <a class="btn btn btn-default smallBottomMargin " id="{{TemplateId}}"
                       href="javascript:void(0)"                           
                       title="Archive this content">
                        <img src="/Content/images/archiveicon.png" height="20" width="20" />
                    </a>

                    <a class="btn btn btn-default smallBottomMargin" id="{{TemplateId}}"
                       href="javascript:void(0)"                           
                       title="Associate tags with content">
                        <img src="/Content/images/tag-add.png" height="20" width="20" />
                    </a>

                    <a class="btn btn btn-default smallBottomMargin " id="{{TemplateId}}"
                       href="javascript:void(0)"                           
                       title="Associate child subscriptions with this template">
                        <img src="/Content/images/GroupOfPeople.png" height="20" />
                    </a>

                    <a class="btn btn btn-default smallBottomMargin " id="{{TemplateId}}"
                       href="javascript:void(0)"                           
                       title="Associate child subscriptions with this template">
                        <img src="/Content/images/GroupOfPeople.png" height="20" />
                    </a>

                    <a class="btn btn btn-default smallBottomMargin " id="{{TemplateId}}"
                       href="javascript:void(0)"                           
                       title="Associate participant group with this template">
                        <img src="/Content/images/ParticipantLists.png" height="20" />
                    </a>

                </div>

.smallBottomMargin{
    margin-bottom:1px !important;
}

Answer 1

尽管这可能不是解决这种情况的正确方法，但是它以某种方式解决了该问题。我愿意寻求更好的解决方案和答案，但在此之前，我一直在努力解决它。

该解决方案基于JS。

get_field( 'total_number_of_products', $post_id );

我们遍历组中的所有按钮。一旦找到一个元素（其在屏幕/视口上的最高位置）不等于其先前的同级元素，我们就将该元素的左边距设置为0，并返回false来中断每个循环。

希望有帮助。

多行引导程序组按钮样式

1 个答案: