如何使用Bootstrap 3將Wordpress主題的幻燈片分成兩部分？

我需要兩個部分來劃分幻燈片 -如何使用Bootstrap 3將Wordpress主題的幻燈片分成兩部分？

左側 - 滑動
右側 - 固定的形象，優先我將手動設置

的代碼，我已經試過添加col-md-6但沒有工作...

<div id="home-flexslider" class="clearfix"> 
    <div class="flexslider"> 
    <ul class="slides"> 
     <li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;"> 
     <div class="desc-wrap"> 
     </div> 
     <img src="/theme/crud/wp-content/uploads/2013/08/slide-three.jpg" alt=""> 
     </li> 
     <li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;"> 
     <div class="desc-wrap"> 
      <div class="slide-description"> 
      <h3> 
               Custom Slide Without Target URL          </h3> 
      <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
      </div> 
     </div> 
     <img src="/theme/crud/wp-content/uploads/2013/08/slide-two.jpg" alt="Custom Slide Without Target URL"> 
     </li> 
     <li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;"> 
     <div class="desc-wrap"> 
      <div class="slide-description"> 
      <h3> 
               <a href="http://#">Custom Slide Sample</a>          </h3> 
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><a href="http://#custom-url" class="know-more">Know More</a> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
      <a href="http://#custom-url"> 
       <img src="/theme/crud/wp-content/uploads/2013/08/slide-one.jpg" alt="Custom Slide Sample"> 
      </a> 
      </div> 
      <div class="col-md-6"> 
      <img src="/theme/crud/wp-content/uploads/2013/08/slide-one.jpg" alt="Custom Slide Sample"> 
      </div> 
     </div> 
     </li> 
    </ul> 
    <ul class="flex-direction-nav"> 
     <li><a class="flex-prev" href="#">Previous</a> 
     </li> 
     <li><a class="flex-next" href="#">Next</a> 
     </li> 
    </ul> 
    </div> 
</div>

來源

2015-12-15 Someone

你試過'寬度：50％'嗎？這對我很有用（使用Inspect Element添加樣式）。然後你可以在你的其他div/image上添加'width：50％'，然後將它們設置爲'display：inline-block' – Druzion

我沒有，我會試試，謝謝你的幫助！ – Someone

Druzion，非常感謝，這幫助了我！ – Someone

嘗試增加width: 50%的滑塊。這將設置頁面寬度的width到50%（無論如何你的情況）。

你可以添加width: 50%到你想要添加的圖像。

然後對這兩個元素添加display: inline-block。這將確保它們顯示在彼此旁邊而不是在彼此之下。

來源

2015-12-15 18:58:51 Druzion

如何使用Bootstrap 3將Wordpress主題的幻燈片分成兩部分？

回答

相關問題