CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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/

大佬总结

以上是大佬教程为你收集整理的css – Twitter Bootstrap的按钮的水平和垂直分隔全部内容,希望文章能够帮你解决css – Twitter Bootstrap的按钮的水平和垂直分隔所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。