Question

我有三个自举按钮组，每组有3个按钮。我希望它们相互低于它们，以便它变成一个大小为3 X 3的网格。此外，两个按钮行之间不应该有任何空格。什么是最好的方法。

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-up fa-rotate-315"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm"">
                <i class="fa fa-arrow-up"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-up fa-rotate-45"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-left"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-home"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-right"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down fa-rotate-45"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down fa-rotate-315"></i>
            </button>
        </div>

Answer 1

您可以display: table;使用btn-group课程。可能它会起作用。

.btn-group{
     display: table;
}

Bootstrap多行按钮组

1 个答案: