Question

我正在使用当前的Bootstrap CSS，但我想将文本底部和左侧相似的样式与我在YouTube上看到的Bootstrap 2.3.2教程对齐。基本上，文本并不直接位于图片的主要部分上。

有没有人这样做过？如果是这样，它是如何完成的？

谢谢！

http://www.bootply.com/pietryszyn/jbTugk4aPV

 <!-- Carousel -->


        `enter code here`<!-- opening div -->       
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

       <!-- Indicators -->
       <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox"> 

         <!-- open listbox -->
         <div class="item active">
          <img class="img-responsive" src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="...">
            <div class="carousel-caption">

            </div>
          </div>

            <div class="item">
         <img class="img-responsive" src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="...">
            <div class="carousel-caption">
            <h2>Massage</h2>
            <h4>Relaxation to Sports/Deep Tissue</h4>
            </div>
            </div>

          <div class="item">
           <img class="img-responsive" src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="...">
           <div class="carousel-caption">
               <h2>Beauty</h2>
               <h4>Nails - Facials - Waxing</h4>
           </div>
         </div>

       </div> <!--close listbox -->

           <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
              </a>

        </div>

         <!-- Javascript files should be linked at the bottom of the page -->
          <script src="js/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
         <script src="js/bootstrap.min.js"></script>

CSS

`enter code here`/* carousel */

`enter code here`.carousel img {
    min-width: 100%;
}

`enter code here`/*!
 * Better Bootstrap Carousel V1.0.0
 *
 * Handcrafted by @haydennedyah from #LetsFixTheWeb
 *
 * Url http://LetsFixTheWeb.com
 */
.carousel-control {
    top: 0px;
    left: 0px;
    width: 20%;
    height: 100%;
    margin-top: 0px;
    font-size: 0px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: none;
    opacity: 0;
}

`enter code here`.carousel-control.right {
    right: 0px;
}

`enter code here`.carousel-control:hover{
    opacity: 0;
}

Answer 1

只需在样式表中添加一些css：

Demo

.carousel-caption {
    right: 0;
    left: 0;
    padding: 30px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    text-align: left;
}

将Carousel Text对齐，看起来像Bootstrap 2.3.2

1 个答案:

Demo