Question

在该站点的顶部放置一个主要视频，该视频应居中放置，并在桌面上占据7列，并在垂直排列的2列中占据2列的右侧。在移动设备上，同一视频是12列，而3个广告则是3列并排。我几乎可以肯定，这可以通过使用.offset来实现，引导文档似乎建议使用<div class="jumbotron jumbotron-fluid" id="mainVideoJumbotron"> <div class="container-fluid" id="mainVideoContainer"> <div class="row justify-content-center"> <div class="col-lg-7 col-sm-12 col-md-12"> <h1 class="heading text-center">I, Pet Goat Ⅱ</h1> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/6n_xCI-peq0" allowfullscreen></iframe> </div> </div> <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0"> <img src="images/ads.jpg" class="img-fluid" alt="ad1"> </div> <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0"> <img src="images/ads.jpg" class="img-fluid" alt="ad2"> </div> <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0"> <img src="images/ads.jpg" class="img-fluid" alt="ad3"> </div> </div> </div> </div>，但是我没有得到期望的结果。相反，我得到的是图像广告垂直堆叠在视频下方，这仅在台式机和移动人像模式下发生。任何帮助将不胜感激。

<div class='div1'>

  <input type="checkbox" class='Xcheckbox' id="byname" name="searchforname" title='Search For All Listings With Sellers Name' value="sellersname" onclick="chbxX(this); <?php $extrasearch==='sellersname'; ?>" <?php if ($extrasearch==='sellersname' ): ?>  checked="checked"
  <?php endif; ?> >

  <label for="byname" class='nameheader' title='Search Date Range'>
    <b>Seller's Name</b>
  </label>

  <input type="text" id='sellersname' name="SellersName" placeholder="Sellers Name" class="sellersname" title='Type The Sellers Name' value="<?php echo $sellersname ?>">

</div>


<script>
  $(function() {

    if ($("#byname").prop('checked') == false) {
      document.getElementById("sellersname").setAttribute("readonly", true);
    } else {
      document.getElementById("sellersname").removeAttribute("readonly");
    }
  });
</script>

Answer 1

HTML

<div class="container-fluid">
    <div class="row">
        <!-- 12 columns on mobile, 7 columns on desktop -->
        <div class="col-12 col-lg-7">
            <!-- video -->
        </div>
        <!-- 12 columns on mobile, 3 columns to the right on desktop -->
        <div class="col-12 col-lg-2 offset-lg-3">
            <div class="row">
                <!-- 
                  3 columns each side by side, which means it takes
                  up 4 columns each. 12 columns on desktop as they
                  need to stack up.
                -->
                <div class="col-4 col-lg-12">ads</div>
                <div class="col-4 col-lg-12">ads</div>
                <div class="col-4 col-lg-12">ads</div>
            </div>
        </div>
    </div>
</div>

小提琴： http://jsfiddle.net/aq9Laaew/139532/

使用纯自举程序4.1.3动态对齐内容的特定问题？

1 个答案:

HTML