Question

我被迫在350x400的方框中将广告放在我内容的右侧。问题是右边的那些列确实应该是两行，包含2个视频，但它们是2列，而是两个视频。因为我不知道如何在不使用2个3号col和1个6号col的情况下将广告放到右边。

问题来自于文本很长并跳转到新行。在前4个视频中它会破坏事物，在底部视频上它会很好（因为它们是正确的行）

有谁知道处理这种情况的好方法？或者它是不是现在能够引导的东西。

谢谢，萨米真实代码：https://gist.github.com/kekeoki/14bd0004cbd76a0c0571da2d841d7883 有点小提琴： https://jsfiddle.net/DTcHh/31225/

<div class="container">
  <div class="row text-center">
    Wow sick ad check it out
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-9 col-md-push-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Most Relevant Video Results: "Keyword"</h3>
        </div>
        <div class="panel-body">
          <div class="col-md-12">
            <div class="row">
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-12">
                    <div class="thumbnail row text-center" style="min-height:260px;">
                      <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                      <h5>text</h5>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="thumbnail row text-center" style="min-height:260px;">
                      <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                      <h5>text</h5>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-12">
                    <div class="thumbnail row text-center" style="min-height:260px;">
                      <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                      <h5>text</h5>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="thumbnail row text-center" style="min-height:260px;">
                      <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                      <h5>text</h5>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class=" row thumbnail text-center">
                  <img src="http://placehold.it/350x400">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">
                <div class="thumbnail row text-center" style="min-height:260px;">
                  <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                  <h5>text</h5>
                </div>
              </div>
              <div class="col-md-3">
                <div class="thumbnail row text-center" style="min-height:260px;">
                  <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                  <h5>text</h5>
                </div>
              </div>
              <div class="col-md-3">
                <div class="thumbnail row text-center" style="min-height:260px;">
                  <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                  <h5>text</h5>
                </div>
              </div>
              <div class="col-md-3">
                <div class="thumbnail row text-center" style="min-height:260px;">
                  <img src="http://placehold.it/250x300" style="height:200px;  background: url(/public/img/loading.gif) 50% no-repeat;">
                  <h5>text</h5>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-3 col-md-pull-9">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Related Searches</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Categories</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Stuff</h3>
        </div>
        <div class="panel-body">
        </div>
      </div>
    </div>

  </div>
  <div class="row">
    <div class=" col-md-9 col-md-offset-3 ">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Other content or ad</h3>
        </div>
        <div class="panel-body">
          content here
        </div>

      </div>
    </div>
    <div class=" col-md-9 col-md-offset-3">
      <div class="row text-center">
        paginate
      </div>
    </div>
    <div class="col-md-9 col-md-offset-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Other content or ad</h3>
        </div>
        <div class="panel-body">
          content here
        </div>
      </div>
    </div>

  </div>
</div>

Bootstrap布局：如何在下面放置列

0 个答案: