如何在bootstrap旋轉木馬中放置文本？

我需要一個如下所示的簡單文本輪播。旋轉木馬中不會有任何圖像。只是文字。現在看起來很好，但旋轉木馬控件，箭頭和雙方的灰色邊緣都不適合閱讀，所以我試圖在文本中居中，而我無法做到。我使用了「塊中心」類，並嘗試了推送，拉動和旋轉木馬內容類中的行和容器的各種組合。沒有成功。如何在bootstrap旋轉木馬中放置文本？

下面是我的代碼。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div id="my-carousel" class="carousel slide" data-ride="carousel"> 
 
       <ol class="carousel-indicators"> 
 
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
        <li data-target="#my-carousel" data-slide-to="1"></li> 
 
        <li data-target="#my-carousel" data-slide-to="2"></li> 
 
       </ol> 
 
       <div class="carousel-inner"> 
 
        <div class="item active"> 
 
         <div class="carousel-content"> 
 
          <div class="text-center"> 
 
           <h3>#1</h3> 
 
           <p>Proin at elementum sapien. Nam in sapien egestas, tempor sem in, porta diam. Integer bibendum tincidunt accumsan. Praesent ultrices metus ut urna vulputate, vel egestas tortor accumsan. Etiam nec dolor tempor, aliquet metus aliquet, scelerisque leo. Nunc in eros et nisl scelerisque bibendum. Suspendisse viverra dui in odio pretium rhoncus. Suspendisse dolor libero, laoreet et feugiat ac, lobortis et ipsum. Etiam lacus ipsum, vestibulum quis consequat sed, molestie vitae lectus. Praesent eu sapien vel risus iaculis rhoncus et et mi.</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <div class="carousel-content"> 
 
          <div class="text-center"> 
 
           <h3>#2</h3> 
 
           <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lorem quam, blandit sed laoreet non, scelerisque eu est. Fusce non urna vel ligula ultrices scelerisque. Cras non venenatis libero. In hac habitasse platea dictumst. Cras mattis ligula ac mauris aliquet condimentum. Quisque accumsan posuere accumsan. Nam facilisis lectus posuere nisi dignissim dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam interdum purus accumsan justo fermentum, id vulputate nibh luctus. Maecenas gravida elit in nulla sollicitudin, eu egestas ipsum luctus.</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <div class="carousel-content"> 
 
          <div class="text-center"> 
 
           <h3>#3</h3> 
 
           <p>Donec consequat eget nisi quis volutpat. Cras vitae tellus dui. Sed bibendum quam eget tempus luctus. Donec laoreet, diam ut condimentum malesuada, libero nisi feugiat nulla, a convallis ante urna a sem. Vivamus eget nibh et nunc iaculis varius. Nam in nunc velit. Quisque id lacinia lorem, ut dictum ipsum. Nullam eu fermentum dui, eget elementum massa. Duis tincidunt eros et euismod porta. Curabitur consectetur, ligula ac blandit maximus, nisl nunc luctus arcu, ornare rhoncus neque urna non neque. Donec in quam non nunc sollicitudin accumsan. Phasellus accumsan sit amet nibh nec suscipit. Donec eget congue nisi, sollicitudin feugiat odio. Donec congue diam orci, in eleifend nulla pharetra in. Integer felis lacus, facilisis id pharetra non, facilisis ut quam.</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <a class="left carousel-control" href="#my-carousel" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left"></span> 
 
       </a> 
 
       <a class="right carousel-control" href="#my-carousel" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right"></span> 
 
       </a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
    <script src="Scripts/jquery-2.1.4.min.js"></script> 
 
    <script src="Scripts/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Demo

來源

2015-08-29 Gaurav Chauhan

添加下面的樣式集的引導CSS後

.carousel-inner { 
    padding-left: 15%; 
    padding-right: 15%; 
}

或者，如果你想這樣做的少您想要查找的變量是@ carousel-control-width。所以

.carousel-inner { 
    padding-left: @carousel-control-width; 
    padding-right: @carousel-control-width; 
}

兩者是等價的，它們從兩側儘可能多的空間在推內容傳送帶控制佔用。

來源

2015-08-29 14:43:33 potatopeelings

如何在bootstrap旋轉木馬中放置文本？

回答

相關問題