css – Twitter Bootstrap的按钮的水平和垂直分隔

前端之家收集整理的这篇文章主要介绍了css – Twitter Bootstrap的按钮的水平和垂直分隔前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
什么是引导Twitter Bootstrap的按钮水平分离?

我在CSS代码中找不到.

我试图重复垂直方面的一样,但似乎我没有实现这一点:

如何在按钮之间进行纵向分隔(第二张图片),但避免相同(在这种情况下是不必要的)(不是第一张照片)?

编辑:用于生成以上图片代码

<div class="container-fluid">

    <div class="row-fluid">

        <div class="well well-small" id="menu-buttons">

            <div class="pull-left" style="width: 48%">

                <a class="btn btn-small">@ Style ^</a>
                <a class="btn btn-small">@ Language ^</a>

            </div>

            <div class="pull-right text-right" style="width: 48%;">

                <a class="btn btn-small">@ Device</a>
                <a class="btn btn-small">@ Webpage</a>

            </div>

            <div style="clear: both"></div>

        </div>

    </div>

</div>

解决方法

我会做的是这样的:
.btn {
    margin: 2px;
}
.well {
    padding: 7px;
}

所以我在每个按钮周围添加了2px的边距,并将容器(.well)的填充量减少了2个像素.这样,“全宽”样式保持不变,“窄”样式现在将在按钮之间具有4像素间距.

您可能想要在这些选择器前面添加一个额外的ID或某些东西,以使其仅适用于您的“#菜单按钮”

和一个例子:http://jsfiddle.net/eHYnQ/

原文链接:https://www.f2er.com/css/213992.html

猜你在找的CSS相关文章