Question

我目前正在尝试使用bootstrap构建网站。到目前为止，一切进展顺利，直到我将bx-slider插入页面。

当我检查元素时，它正在添加width: 999999px的宽度，你可以想象它会导致布局看起来很糟糕。滑块中的图像具有相同的高度和宽度。

这是html

 <div class="row-fluid">
            <div id="bx-slider" class="span9">
                <div>
                    <div>
                        <img src="img/working-together.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/discussion.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/facilitator.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/leadership.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/success.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/teamwork.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
            </div>
            <div class="span3">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                    Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                    Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                    Phasellus dapibus pretium aliquam. 
                    Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                </p>
            </div>
        </div>
    </div>

这是JS

$(function(){
$('#bx-slider').bxSlider ({
   minSlides: 1,
   maxSlides: 10,
   auto: true,
   pager: false,
   controls: false,
   autoDelay: 1000,
   autoHover: true,
   slideWidth: 770
});});

如您所见，我已尝试按照网站上的建议添加slideWidth和max min幻灯片。

有人有任何建议吗？

刚刚将滑块更改为无序列表，并且每个幻灯片都是列表元素无效。滑块包装器和窗口正在拾取宽度，但它似乎将宽度添加到bx-slider元素。

Answer 1

简单的答案是在bx滑块周围放置一个包含div，并附加span类，最后就是这样。

<div class="span9">
    <ul id="bx-slider" class="slider-border">                      
       <li>
       </li>
    </ul>
</div>

Bx Slider增加了巨大的宽度

1 个答案: