Question

我是学生。我已经使用了Bootstrap 3.3.7并在转移到v4.1之后。在此版本中，列不会自动浮动到右侧。所以我使用了d-inline-block类。我创建了4个块，每个块有3列。一行中的列数等于12.然后最后一列跳转到新行而不是换行到上一列。但是这个代码适用于Bootstrap 3.3.7。另外，我只为一个块使用了2列，当列数小于12时，没有问题。我在谷歌上找不到任何合适的解决方案。请帮忙。谢谢。

实施例： https://jsfiddle.net/EshanRajapakshe/3aeaeohb/

我的代码是：

<section class="popular-templates-section">
  <div class="container-fluid">
    <div class="col-lg-12 col-md-12">
    <div class="popular-templates-title">
      <h4>Most Popular Templates</h4>
    </div>

    <div class="popular-templates">

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>      


      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>    

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>   

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>   

      </div>
    </div>
  </div>
</section>

Answer 1

将您的.col包裹在。row内。

<div class="row">
  <div class="col-lg-6">6 cols</div>
  <div class="col-lg-6">6 cols</div>
</div>

同时从d-inline-block删除cols课程。

在您的特定情况下：

<section class="popular-templates-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="popular-templates-title">
          <h4>Most Popular Templates</h4>
        </div>
      </div>
    </div>

    <div class="popular-templates">
      <div class="row">
        <div class="col-lg-3 col-md-3">
          <div class="template-img">
            <img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>

          <div class="template-info">
            <div class="template-name-type">
              <h6 class="template-name">Web Design Inspiration</h6>
              <h6 class="template-type">HTML5 Template</h6>
              <h6 class="template-more-details">MORE DETAILS</h6>
            </div>

            <div class="template-price-type">
              <h5 class="template-price">$78</h5>

              <div class="template-type-icons">
                <img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
                <img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
              </div>
            </div>
          </div>
        </div>


        <div class="col-lg-3 col-md-3">
          <div class="template-img">
            <img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>

          <div class="template-info">
            <div class="template-name-type">
              <h6 class="template-name">Web Design Inspiration</h6>
              <h6 class="template-type">HTML5 Template</h6>
              <h6 class="template-more-details">MORE DETAILS</h6>
            </div>

            <div class="template-price-type">
              <h5 class="template-price">$78</h5>

              <div class="template-type-icons">
                <img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
                <img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-3">
          <div class="template-img">
            <img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>

          <div class="template-info">
            <div class="template-name-type">
              <h6 class="template-name">Web Design Inspiration</h6>
              <h6 class="template-type">HTML5 Template</h6>
              <h6 class="template-more-details">MORE DETAILS</h6>
            </div>

            <div class="template-price-type">
              <h5 class="template-price">$78</h5>

              <div class="template-type-icons">
                <img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
                <img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="template-img">
            <img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
          <div class="template-info">
            <div class="template-name-type">
              <h6 class="template-name">Web Design Inspiration</h6>
              <h6 class="template-type">HTML5 Template</h6>
              <h6 class="template-more-details">MORE DETAILS</h6>
            </div>
            <div class="template-price-type">
              <h5 class="template-price">$78</h5>
              <div class="template-type-icons">
                <img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
                <img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

还将课程img-fluid添加到img，因此它不会比其容器大。

Bootstrap-v4 Grid system Docs

Answer 2

这是更新的小提琴link

我编辑了你的html，删除了非必要的类。此外，如果您希望所有设备上的所有列都具有相同的大小，那么您只需要一个col-{number}类

此外，引导程序4中没有col-xs-{class}。而不是使用col-{number}

<section class="popular-templates-section">
  <div class="container-fluid">
    <div class="popular-templates-title">
      <h4>Most Popular Templates</h4>
    </div>
    <div class="popular-templates">
      <div class="row m-0">
        <div class="col-3 blue">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>
        <div class="col-3 black">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>

        <div class="col-3 blue">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>

        <div class="col-3 black">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

Answer 3

您面临的问题基本上是因为您使用的Bootstrap网格的语义不正确。在下面找到更正后的代码，肯定会有所帮助。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="author" content="Akash Kumar">
  <meta name="url" content="http://akashshivanand.com">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
    .blue {
      padding: 5px;
      background: blue;
    }
    
    .black {
      padding: 5px;
      background: black;
    }
  </style>
  <title> by EshanRajapakshe</title>
</head>

<body>
  <section class="popular-templates-section">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="popular-templates-title">
            <h4>Most Popular Templates</h4>
          </div>
          <div class="popular-templates">
            <div class="row">
              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
                <div class="template-img">
                  <img src="assets/images/template-thumb/template-1.jpg" alt="">
                </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
                <div class="template-img">
                  <img src="assets/images/template-thumb/template-1.jpg" alt="">
                </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
                <div class="template-img">
                  <img src="assets/images/template-thumb/template-1.jpg" alt="">
                </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
                <div class="template-img">
                  <img src="assets/images/template-thumb/template-1.jpg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

＆＃13;

Bootstrap 4列不起作用

3 个答案: