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

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%添加到滑块中。这将将width设置为页面宽度的50% (无论如何，在您的情况下)。

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

然后在这两个元素中添加display: inline-block。这将确保它们在彼此之间而不是在彼此下面显示。