Bootstrap3.0.0如何实现.card类margin-left自动递增

DevOps 小满

2026-8-29

实现方案

适配你当前使用的 Bootstrap 3.0.0 + jQuery 1.12.4 环境，无需额外引入其他依赖。

核心逻辑

你原来构思的多层if判断逻辑可以简化，不需要逐一枚举margin-left值：

固定单步偏移值为479px
每次提交生成新卡片前，统计当前页面已存在的.card元素总数
新卡片的margin-left = 已有卡片数量 * 单步偏移值，天然实现0、479px、958px……的递增效果
页面加载时自动遍历已存在的.card元素，按顺序补设偏移值，避免刷新后错位

可直接使用的代码

注意：代码中注释标注的选择器需要和你页面实际DOM结构匹配替换
把下面代码放在jQuery引入标签之后即可：

// 配置偏移步长
const CARD_OFFSET_STEP = 479;

// 页面加载完成后初始化已有卡片的偏移
$(function() {
  $('.card').each(function(index) {
    $(this).css('margin-left', index * CARD_OFFSET_STEP + 'px');
  });

  // 监听表单提交事件，把form替换成你实际的表单选择器
  $('form').on('submit', function(e) {
    e.preventDefault();
    // 把#contentInput替换成你实际的输入框选择器
    const inputVal = $('#contentInput').val().trim();
    if (!inputVal) return false;

    // 计算当前新卡片需要的偏移值
    const currentCardCount = $('.card').length;
    const newMarginLeft = currentCardCount * CARD_OFFSET_STEP;

    // 生成新卡片元素，按你实际的.card结构修改内部HTML即可
    const newCard = $('<div class="card" style="margin-left: ' + newMarginLeft + 'px"></div>').text(inputVal);
    
    // 把.card-wrap替换成你实际存放卡片的容器选择器
    $('.card-wrap').append(newCard);

    // 提交后清空输入框
    $('#contentInput').val('');
  });
});