定位 ui-angular 轮播控件答案

【问题标题】：Positioning ui-angular carousel controls定位 ui-angular 轮播控件
【发布时间】：2016-09-05 06:31:16
【问题描述】：

我正在创建一个显示带有一些元数据的图像的轮播。在 md 和 lg 屏幕上，我希望元数据显示在右侧，而在较小的屏幕上，我希望它位于图像下方，使用 col-md-8 / col-md-4 可以正常工作

这是我的轮播代码：

        <uib-carousel active="active" interval="0" no-wrap="noWrapSlides" template-url="/Scripts/MainClient/views/cwCarouselTemplate.html"  style="height:100%">
            <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                <div class="row">
                    <div class="col-md-8 " ng-style="{height: hackheight}" id="img-div">
                        <div style="padding:10px; height:100%;" class="black-bkgd">
                            <span class="helper"></span><img class="img-responsive " ng-src="{{slide.image}}" style="vertical-align:middle; display:inline-block">
                        </div>
                        </div>
                    <div class="col-md-4">
                        Here's where the meta data goes go!
                        <h4>Slide {{slide.id}}</h4>
                    <p>{{slide.text}}</p>
                    </div>
                    </div>
            </div>
        </uib-carousel>

我遇到的问题是关于右手控制 - 它位于整个轮播的右侧，我希望它相对于 col-md-8 div 正确（所以它出现在右侧图像，而不是元数据）。如果我在控件上将 right 设置为 34%，它会起作用，但这在 xs/sm 屏幕上不起作用（控件位于图像中间）。

我可以在 xs/sm 屏幕（右：0）或 md/lg 屏幕（右：34%）上将它放到正确的位置，但不能同时在所有屏幕上！

我的一个想法是在右侧添加一个<span class="hidden-xs hidden-sm" style="width:34%"></span> 以将控件推送到更大的屏幕上，但我无法让它工作 - 跨度与轮播控件堆叠在一起。

这是我正在使用的模板：

    <div class="carousel">
        <div class="carousel-inner" ng-transclude></div>
        <a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
          <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">previous</span>
        </a>
        <a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
          <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">next</span>
        </a>
        <!--
        <ol class="carousel-indicators" ng-show="slides.length > 1">
          <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
            <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
          </li>
        </ol>
        -->
    </div>

非常感谢您的帮助

【问题讨论】：

只是一个疯狂的想法：为什么不将按钮包装在 col-md-8 div 中并将位置设置为绝对？
哇，非常感谢 - 6 小时的摆弄，解决方案如此简单！我也必须在其中添加一个col-xs-12 才能使其正常工作，但<div class="col-md-8 col-xs-12" style="position:absolute;top:0;bottom:0; margin-left:15px"> 基本上可以正常工作（现在唯一的问题是，当 xs/sm 按钮高度是 img+meta div 的高度，所以太低了，但我相信我会弄清楚的！）。请添加为答案，以便我接受。

标签： angularjs twitter-bootstrap angular-ui-bootstrap carousel

【解决方案1】：

您可以将按钮包裹在绝对定位的col-md-8 中以实现结果。

如果元素高度仍然存在问题，您可以提供代码的 plunkr，以便我们进行调查。

【讨论】：