html - 如何使用 Bootstrap 3 将 Wordpress 主题的幻灯片分成两部分？

Question

我需要将幻灯片分成两部分 -

• 左侧 - 滑动
• 右侧-固定图像，优先我手动设置

代码，我尝试添加 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>

Answer 1

尝试将 width: 50% 添加到 slider 。这会将 width 设置为页面宽度的 50%(无论如何在您的情况下)。

您可以将 width: 50% 添加到您要添加的图像。

然后向两个元素添加display: inline-block。这将确保它们彼此相邻显示，而不是彼此下方显示。