代码之家 › 专栏 › 技术社区 › Dharmesh Vekariya

如何在引导4中设置列换行

bootstrap-4 html5 css html

Dharmesh Vekariya · 技术社区 · 7 年前

->如何在响应视图中设置该类型结构的列。我想要一个接一个栏目,我有附件屏幕截图,我想要在iPad视图的引导4。我要比第二列多一列。

@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>

1 回复 | 直到 7 年前

Tom 7 年前

引导列在一行中只能有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>

我把卡片围在一个分区内,其中包含一行col-md-4和col-lg-12。这将显示卡片在平板电脑和更小的,但如果比平板电脑大,它将显示在一行。不知道这是不是你的意思,我希望能有所帮助。