定位单向旋转木马控件

Question

我正在创建一个carousel，显示一些元数据的图像。在md和lg屏幕上，我希望元数据出现在右边，在较小的屏幕上，我希望它在图像下方，使用col-md-8/col-md-4

这是我的carousel代码:

        <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-8div正确(因此它出现在图像的右侧，而不是元数据)。如果我在控件上设置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>

非常感谢您的帮助

Answer 1

您可以将按钮包裹在绝对位置的col-md-8中以达到效果。

如果元素的高度仍然是一个问题，你可以提供你的代码，这样我们就可以查看。