Bootstrap 3在屏幕的左侧和右侧制作导航箭头

Question

是否有一种简单的方法可以使用Bootstrap 3在页面的左右浮动两个导航箭头。 基本上是一个前进和后退按钮...我希望按钮浮动，我希望它们在页面上保持水平居中，并且不与页面上的任何内容重叠。

基本上，我希望整个页面像图像轮播一样工作……我只是没有图像。

如果需要，我也可以使用Angular 1.3来完成此任务。

我本质上只想要一个CSS片段，该片段将在屏幕的左侧放置一个左箭头，在屏幕的右侧放置一个右箭头，然后将其浮动并保持在那里...导航将通过角度路由进行处理...我只是在尝试得到一个简单的显示CSS ...

Answer 1

好吧，对于boostrap导航箭头，

将链接锚定为与包含您的信息的页面相同的高度，因为高度相同，因此箭头将位于锚标记的中心：

所以在左侧看起来像这样：

<a class="carousel-control left" href="#/current/prev" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>

在页面的右侧，它看起来像这样：

<a class="carousel-control right" href="#/current/next" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

中间页面将是您将使用angular切换和路由的内容。

这是一个小提琴： http : //jsfiddle.net/gkbywbv1/2/

从那里，您可以使用轮播控制CSS样式来满足您的需求。