jquery - 菜单内的旋转木马换行符

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