html - 如何使用Bootstrap 3将Wordpress主题的幻灯片分为2个部分？

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


左侧-滑动
右侧-固定图像，最好手动设置


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

最佳答案

尝试将width: 50%添加到滑块。这会将页面宽度的width设置为50%（无论如何）。

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

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

关于html - 如何使用Bootstrap 3将Wordpress主题的幻灯片分为2个部分？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34290464/