javascript - 如何修复引导卡格式？

Question

我想将我的卡片排成一行，如此处所示https://codepen.io/dnorton94/pen/VwZdRzG我通常会使用引导行类，但是当我在下面的代码上这样做时，它会水平缩小卡片。

我正在使用引导程序 4.3 和 JQuery 3.4

我尝试使用 col 类来增加宽度

<div id='filters' class='sections'>
      <div class='filter-attributes'>
        <h4>Type</h4>
        <input type='checkbox' name='type' id='skill' value='skill' >Skill</input>
        <input type='checkbox' name='type' id='passion' value='passion' >Passion</input>
        <input type='checkbox' name='type' id='course' value='course' >Course</input>
        <input type='checkbox' name='type' id='job' value='education' >Education</input>
      </div>
      <div class='filter-attributes'>
        <h4>Personality</h4>
        <input type='checkbox' name='personality' id='large' value='istj' >ISTJ</input>
        <input type='checkbox' name='personality' id='small' value='esfj' >ESFJ</input>
      </div>
      <div>
        <br>
        <input type='button' id='none' value='Clear all'></input>
      </div>
    </div>

<div class="container">
    <div class='sections'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

$(document).ready(function() {
  var $products = $('.grid-products'),
      $filters = $("#filters input[type='checkbox']"),
      product_filter = new ProductFilterLevel2($products, $filters);
  product_filter.init();
});

function ProductFilterLevel2(products, filters) {
  var _this = this;

  this.init = function() {
    this.products = products;
    this.filters = filters;
    this.bindEvents();
  };

  this.bindEvents = function() {
    this.filters.click(this.filterGridProducts);
    $('#none').click(this.removeAllFilters);
  };

  this.filterGridProducts = function() {
    //hide all
    _this.products.hide();
    var filteredProducts = _this.products;
    //filter by colour, size, shape etc
    var filterAttributes = $('.filter-attributes'); 
    // for each attribute check the corresponding attribute filters selected
    filterAttributes.each(function(){
      var selectedFilters = $(this).find('input:checked');
      // if selected filter by the attribute
      if (selectedFilters.length) {
        var selectedFiltersValues = [];
        selectedFilters.each(function() {
          var currentFilter = $(this);
          selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
        });
        filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
      }
    });
      filteredProducts.show();
  };

  this.removeAllFilters = function() {
    _this.filters.prop('checked', false);
    _this.products.show();
  }
}

我希望卡片以默认卡片宽度水平排列

标签： javascriptjqueryhtmltwitter-bootstrap

Answer 1

改变

<div class="container">
    <div class='sections'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

至

<div class="container">
    <div class='sections row'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

无需添加新的 div 来创建行只需将类添加到第二个 div