Question

我目前正在尝试将Angular UI Bootstrap Carousel作为我页面的全长。我在最外面的div上有它，但它只扩展了页面的宽度，并在下一个div的开头垂直停止。

这是ctrl（只是将图像存储在一个数组中）

$scope.myInterval = 5000;


 var slides = $scope.slides = [
  { image:"http://www.bestfon.info/images/joomgallery/originals/animales_7/dog_with_glasses_20140320_2017987799.jpg"
 },
 {
  image:"http://www.animalpictures1.com/data/media/177/dog_2560x1440.jpg"
 }
  ];

这是html（旋转木马位于顶部，但div位于最底部）

<div>
 <carousel interval="myInterval" id="carouselID">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}">

      </slide>
     </carousel>
<div class="container-fluid">

  <div class="row">
   <!-- <div class="col-md-12">
    <img src="../images/barkIT.png" alt="">
   </div> -->
    <div class="col-md-12" id="profileIMG">
     <img src="{{owner.image}}" alt="">
    </div>
    <div class="col-md-12">
     <h1>{{owner.name}}</h1>
    </div>
    <div class="col-md-12" id="contactInfo">
     <p><img src="../images/email.png" alt="">{{owner.email}}    <img src="../images/telephone_black.png" alt="">{{owner.phone}}</p>

    </div>
    <div class="col-md-12" id="socialNav">
     <a href="https://twitter.com/{{owner.twitter}}"><img src="../images/Twitter-icon.png" alt=""></a>
     <a href="https://instagram.com/{{owner.instagram}}"><img src="../images/Instagram-icon.png" alt=""></a>
    </div>
    <div class="col-md-12">
     <a href="#/owners/{{owner._id}}/edit">Edit Profile</a> | <a ng-click="deleteOwner(owner._id)">Delete Profile</a>
    </div>
  </div>

<hr>
 <div>
  <div class="col-md-12" id="dogTag">
   <img src="../images/tag_add.png" alt="" ng-click="dogAdd = true">
  </div>
   <div  class="col-md-12" ng-show="dogAdd">
    <form ng-submit="createDog(newDog)">
     <!-- <div class="col-md-3"> -->
      <input type="text" data-ng-model="newDog.name" placeholder="Name">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="url" ng-model="newDog.image"placeholder="Image URL">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="text" ng-model="newDog.type" placeholder="Breed">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="number" ng-model="newDog.weight" placeholder="Weight">
    <!--  </div>
       </div> -->
   <!-- <div class="col-md-12"> -->
      <button type="submit" ng-click="dogAdd = false">Create</button>
   <!-- </div> -->
    </form>
 </div>
<div  id="dogCard" class="col-md-12">

 <div ng-repeat="dog in dogs">
  <div class="col-md-4">
   <h3>{{dog.name}}</h3>
   <p>{{dog.type}}</p>
   <p>{{dog.weight}}</p>
  </div>


  <div class="col-md-4" id=dogProfileIMG>
   <img src="{{dog.image}}" alt="">
  </div>
  <div class="col-md-4">
   <h3><u>Reminders</u></h3>
   <div id="reminderList" ng-repeat="reminder in dog.reminders">
    <ul>
     <li><img src="../images/paw.png" alt="">{{reminder}}</li>
   </div>
 <button ng-click="reminderAdd = true">Add Reminder</button>
 <form ng-submit="createReminder(dog, reminder)" ng-show="reminderAdd">
  <input type="text" ng-model="reminder" placeholder="Enter Reminder">
  <button type="submit" ng-click="reminderAdd = false">Add Reminder</button>
 </form>
  </div>
  <hr>
 </div>
</div>
</div>
</div>
</div>

这是我有的CSS

#carouselID{
 height:100%;
 img{
  width:100%;
  opacity:.7;
 }

Answer 1

旋转木马高度很可能仅限于图像的高度。如果你想填满更多的页面，你必须让你的图像更高： - ）

Angular UI Bootstrap Carousel全屏

1 个答案: