Question

我正在尝试将NivoSlider用于我的图像滚动条，并希望将其放置在靠近顶部的页面中心的div中，就在导航栏下方（就像很多网站一样）。

我想要实现的是让它变得流畅（我已经知道最大宽度为100％），但是当它填充父容器时，它在页面上看起来很大并且压倒了所有东西。

是否有一个我可以使用的跨度将保持在页面的中心，或者如果我指定Nivo包装的宽度和高度我将如何保持这种流动性。我似乎无法解决这个问题，如果有人能指出我正确的方向，我将非常感激

编辑好吧所以我创建了一个span2，span8，span2并将nivoslider放在span8中，现在这已经让滑块居中但是我猜测有更好的方法

Answer 1

你可以这样做，而不是你现在正在做的事情（它完成同样的事情）......

<div class="span8 offset2"></div>.

您可以这样设置精确的宽度，而不是使用预设的跨度css类......

<div class="span12">

    <div style="width: MY_EXACT_WIDTH_IN_PIXELS; margin: 0 auto;">
        MY NIVO THINGY WITH 100% WIDTH
    </div>

</div>

我认为你想要的是nivo的东西始终保持中心。网格系统的设置方式，您将使span12区域（页面的中间940px）始终居中。

所以，无论你把nivo放在哪里，你都希望结束所有的bootstrap标签......

这是一个例子......

<html>
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12</h4>
                </div>
            </div>
        </div>

        <div style="margin: 0 auto; width: 400px; background-color: #EFEFEF;">
            <h4>My nivo goes here</h4>
        </div>

        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12 again</h4>
                </div>
            </div>
        </div>
</body>
</html>

Answer 2

您为什么决定不使用原生的Twitter引导滑块？

也许这篇文章可以帮助您：making nivo slider fluid

Twitter Bootstrap Spans

2 个答案: