Question

我在使用twitter bootstrap的菜单中遇到轮播问题。

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="carousel slide" id="CarouselTest">
        <div class="carousel-inner">
        <ul class="nav navbar-nav item active" >
                        <li>One 1</li>
                        <li>Two 1</li>
        </ul>

        <ul class="nav navbar-nav item">
                        <li>One 2</li>
                        <li>Two 2</li>

        </ul>


        </div>
        <ul class="nav navbar-nav navbar-right" >
                        <li><a data-slide="prev" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                        <li><a data-slide="next" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
        </ul>       
</div>
</div>
</nav>

这是显示我得到的结果的图像： http://www9.0zz0.com/2015/08/02/17/118477064.png

我试过这个但没有改变：

<style>
.carousel-inner{
  width:500px;
  height: 100%;
}
</style>

这里有关于jsfiddle的演示：http://jsfiddle.net/r8uvfo3s/

如果您对解决此问题有任何疑问，请提前给我们一些帮助，谢谢您：）

Answer 1

为什么看起来有一条新线的原因是因为没有空间让箭头再适合了。

要解决此问题，我们可以使用calc()设置.carousel-inner的适当宽度，为箭头提供空间。

.carousel-inner {
    width: calc(100% - 88px); /* 88px the total size of the arrows */
    float: left;
}

Fiddle

更新

由于calc()不是一个选项，因此请将.navbar-right位置设为绝对位置，以便它可以在不破坏carousel-inner元素的情况下上升。

.navbar-right {
    position: absolute;
    top: 0;
    right: 0;
}

Fiddle

菜单中的转盘换行

1 个答案: