如何在Bootstrap 4中设置列换行

Question

->如何在响应视图中设置这种类型的结构列。我想要一列，我有附件屏幕快照，我想要在Bootstrap 4中获得ipad视图。我想要一列而不是第二列。

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');[![enter image description here][1]][1]
body {
  font-size: 15px;
  line-height: 28px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;            
}
.video-thumb .video-icon {
  width: 35px;
  height: 35px;
  background-color: rgba(0,0,0,.9);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;    
}
.thumbnail-main, .video-content {
  margin-bottom: 20px;
}
img {
  max-width: 100%;
}
.inner-content span {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 12px;          
 }
.inner-content a.link {
  color: #208385;
}
h5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
section {
  padding: 100px 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
    </div>
  </div>
</section>

Answer 1

Bootstrap列在一行中只能包含12列，在您的示例中，您有4个div，其中4、8、4、8列。

您需要执行的操作如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

我将卡包围在一个div中，其中包含一行带有col-md-4和col-lg-12的行。这会在平板电脑上显示一个卡片，在较小的平板电脑上显示，但是在较大的平板电脑上，它将连续显示。不知道这是否是您的意思，希望对您有所帮助：）！