Question

我正在尝试删除空间并使弹性列.col-md-5具有不同的高度。但是它并没有变成flex，我在Google上搜索了很多，有数百个线程，而我尝试了大多数线程。但是仍然无法理清。当前，我得到以下结果

以下是代码段：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="ayaz">
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Matt Foster </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Chairman</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 " style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">ED KOMZELMAN </h2>
              <h2 style="float: left; color:#f28b3c; display:none;"> | </h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Micheal S Frank </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Director</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果有人请我指导我，我将不胜感激。非常感谢

Answer 1

您似乎需要masonry script。它曾经依赖于jQuery，但现在它实际上可以与原始JavaScript一起使用：

new Masonry( parentSelector, {
  itemSelector: childSelector
});

...，在其中用适当的选择器替换parentSelector和childSelector。

new Masonry('.ayaz', {
  itemSelector: '.col-md-5 '
});

.ayaz .col-md-5 {
  padding-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<div class="container-fluid">
  <div class="ayaz">
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Matt Foster </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Chairman</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 " style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">ED KOMZELMAN </h2>
              <h2 style="float: left; color:#f28b3c; display:none;"> | </h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Micheal S Frank </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Director</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

完整答案：

您要寻找的是某种砖石结构的网格。

desandro masonry.desandro.com可以将3rd party模块用作砌筑物。bootstrap3有很多插件。

其他方法是重新考虑您的内容结构，以避免出现空白。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container-fluid">

  <div class="row">

    <div class="col-6">
        <div class="card">
          some content 1
        </div>
        <div class="card">
          some content 2
        </div>
    </div>

    <div class="col-6">
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
     </div>
  </div>

</div>

如何使Bootstrap 3列具有不同高度的柔韧性？

2 个答案: