html - 使 Nivo Slider 全宽

Question

我正在开发一个将 Nivo Sliders 与 Twitter Bootstrap 结合使用的元素。我遇到了一个可能无法修复的问题，因为 Nivo 可能不是为它构建的。但我正在尝试将使用 span12 的当前 slider 变成全 Angular slider 。这是可能的还是我应该寻找一个全宽 slider 来集成？我目前的看法是。

<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

如果你想让 slider 全宽，一般的方法是将 slider 移到 span12、行和容器 div 之外。

从您发布的代码来看，您似乎在一个容器 div 中，因此请先关闭它，添加 slider 代码，然后为页面的其余部分重新打开一个新的容器 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 -->  

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

祝你好运!