Twitter Bootstrap 3.0 텍스트가있는 캐 러셀 형식화

Question

일부 이미지 형식을 사용하여 트위터 부트 스트랩 캐 러셀 작동 (3.0 이상)을 얻으려고하므로 이미지를 오른쪽/텍스트 왼쪽에서 왼쪽 텍스트에 그리고 나서 텍스트를 오른쪽에서 순환시킵니다. .

그리드 시스템이 경우 중단-이미지는 여기 왼쪽 테두리에 걸렸을로 보인다 (3.13 레일) 렌더링 내 바이올린 경우 :

http://jsfiddle.net/jaytho/gvAMz/2/

하지만 예는 밖으로 연속 상승 부트 스트랩 웹 사이트 :

<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"> 
    <div class="item active"> 
     <div class="row"> 
      <div class="col-md-5-offset-1"> 
       <img src="http://ndevilla.free.fr/lena/lena.jpg" alt="..."></img> 
       <div class="carousel-caption">Caption</div> 
       <div class="col-md-6"> 
        <h1>Some profound text here</h1> 

        <p>this is an image from my image processing past</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://perception.csl.illinois.edu/gpca/applications/baboon_small.jpg" alt="..."></img> 
    </div> 
    <div class="item"> 
     <img src="https://www.google.com/images/srpr/logo11w.png" alt="..."></img> 
    </div> 
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left"></span> 

</div> 

이것은 의도적으로 설계된 것입니까? (내 첫 번째 게시물입니다)

Answer 1

행에 다른 div 및 클래스가 너무 많습니다.

다음은 .row 또는 '슬라이드'안에 두 개의 .col-xs-6을 사용하여 요청한 것을 수행하는 예입니다. http://goo.gl/v2qY3J

을 살펴보세요 - - 부트 스트랩의 회전 목마의 예에서 예제 코드와 주석을 사용하여 너의가 동일하게 작동 http://cdpn.io/wcpuf

<div class="row"> 
    <div class="col-xs-6"> 
     <img alt="First Slide" src="http://placekitten.com/g/350/280"> 
    </div> 
    <div class="col-xs-6"> 
     <h1>Temporary Title Text on the Right</h1> 
     <p>Some paragraph copy for fun</p> 
    </div> 
</div><!-- end row -->