Question

我正在开发一个使用Nivo Sliders和Twitter Bootstrap的项目。我遇到了一个可能没有修复的问题，因为Nivo可能不是为它构建的。但我正在尝试将使用span12的当前滑块转换为全宽滑块。这是可能的还是我应该只是寻找一个全宽滑块来集成？我目前的观点是。

<div class="slider-wrapper theme-default">
<div class="row">
    <div class="span12">
       <div id="nslider" class="nivoSlider"> 

/* Nivo SLider */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow hidden;
}
.nivoSlider img { position absolute; top:0px; left:0px; max-width:none; }
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

Answer 1

如果要使滑块全宽，一般方法是将滑块移动到span12，row和container div之外。

从您发布的代码中，看起来您在容器div中，如此接近，首先添加滑块代码，然后为页面的其余部分重新打开一个新的容器div：

</div> <!-- NEW close open container div -->

<div class="slider-wrapper theme-default"> <!-- open full width slider-wrapper div -->

<div id="nslider" class="nivoSlider">  
<!-- slider code -->
</div> <!-- close nslider -->

</div> <!-- close slider-wrapper -->  

<div class="container">  
<!-- continue as normal -->

根据滑块代码和CSS的具体情况，这可能需要一些微调。

祝你好运！

制作Nivo滑块全宽

1 个答案: