引导程序中跨度之间的特定宽度 [英] Specific widths between spans in bootstrap

查看：22
本文介绍了引导程序中跨度之间的特定宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 2.3 构建一个响应式网站，其中包含一些基本的 jQuery.

我有 3 个购买按钮，它们都在各自的 span2 中.中间的 buy 保持居中，这正是我想要的，但是随着浏览器宽度的变化，buy 左右都会移动.

有什么办法可以让buy的左右与中心保持固定的距离吗?

另外，我需要它们在单独的跨度中，因为 jQuery 需要这个.(我让左右购买按钮消失，并在不同的范围内保持中间购买中心.)

 
<div class="span2 offset3"><a href="http://www.reddit.com" class="buy-left">购买</a></div><div class="span2 pagination-centric"><a href="#" class="buy-center">购买</a></div><div class="span2 pagination-centric"><a href="http://www.soundcloud.com" class="buy-right">购买</a></div>

要了解我在说什么，请查看 shifteddd.我希望购买链接始终保持在各自的海报下方(好吧，无论如何都要降低到 840 像素).

解决方案

http://jsfiddle.net/fHDxk/4

.center-wrap {文本对齐:居中；溢出:隐藏；}.center-wrap .span2 {浮动:无；显示:内联块；左边距:15px；/* 根据你的口味调整 */宽度:100px；/* 根据你的口味调整 */}<div class="row-fluid buy-row"><div class="center-wrap"><div class="span2"><a href="http://www.reddit.com" class="buy-left">点击我</a>

<div class="span2 pagination-centric"><a href="#" class="buy-center">点击我</a>

<div class="span2 pagination-centric"><a href="http://www.soundcloud.com" class="buy-right">点我</a>

请注意，我已经删除了您的偏移类.

I'm building a site using Bootstrap 2.3 responsive with some basic jQuery involved.

I have 3 buy buttons, all in separate their own span2. The middle buy stays centered, which is what I want, but the buy left and right both move as the browser width is changed.

Is there any way to keep the buy left and right a fixed distance from the center?

Also, I need them in separate spans as the jQuery needs this. (I'm making the buy left and right buttons disappear and being in separate spans keeps the middle buy central.)

             <div class="row-fluid buy-row">
                    <div class="span2 offset3"><a href="http://www.reddit.com" class="buy-left">Buy</a></div>
                    <div class="span2 pagination-centered"><a href="#" class="buy-center">Buy</a></div>
                    <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Buy</a></div> 
       </div>

Edit: To see what I'm talking about in action, check shifteddd. I want the buy links to remain below their respective poster at all times (well, down to 840px anyways).

解决方案

http://jsfiddle.net/fHDxk/4

.center-wrap {
    text-align: center;
    overflow: hidden;
}
.center-wrap .span2 {
    float: none;
    display: inline-block;
    margin-left: 15px; /* adjust to your taste */
    width: 100px; /* adjust to your taste */
}

<div class="row-fluid buy-row">
    <div class="center-wrap">
        <div class="span2"><a href="http://www.reddit.com" class="buy-left">Click me</a>

        </div>
        <div class="span2 pagination-centered"><a href="#" class="buy-center">Click me</a>

        </div>
        <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Click me</a>

        </div>
    </div>
</div>

Notice that I've removed your offset class.

这篇关于引导程序中跨度之间的特定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆