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（所以它出现在右侧的右侧）图像，而不是元数据）。它可以正常工作，如果我在控件上设置为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>

非常感谢您的帮助

Answer 1

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

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

定位ui角度旋转木马控件

1 个答案: