定位ui-angular轮播控件

Question

我正在创建一个显示带有一些元数据的图像的轮播。在 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 屏幕（right:0）或 md/lg 屏幕（right: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>

非常感谢您的帮助

Answer 1

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

如果元素高度仍然是个问题，您可以提供一份代码，以便我们进行调查。

定位ui-angular轮播控件

Positioning ui-angular carousel controls

carousel

twitter-bootstrap

angularjs

angular-ui-bootstrap