如何将Bootstrap提示框（Alert）排列为两列或三列？

嘿，我仔细看了你的代码和遇到的问题，其实你已经离成功很近了！问题主要出在没有给每个Alert条目正确添加Bootstrap网格的列容器，还有一处选择器的小错误。下面我来帮你搞定多列布局：

问题分析 #

1. 你已经把#memberlist设置成了.row，但添加单个成员时，生成的Alert没有被包裹在列（col-*）元素里，导致每个Alert占满整行。
2. btn-team2的代码里错误地使用了$('.container').html()，这会替换整个容器的内容，直接破坏了页面布局，应该还是操作#memberlist。
3. 缺少间距设置，条目之间会显得很拥挤，影响视觉体验。

解决方案 #

我们需要统一所有添加成员的逻辑，把每个Alert都包裹在Bootstrap的列容器中，同时修复选择器错误，再添加一点间距优化：

修改后的完整代码

HTML（无需改动，保持原样即可）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<center>
    <div class="foot">
        <div class="row">
            <div class="col-sm-1">
            </div>
            <div class="col-sm-10">
                <!-- Input for members -->
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Add member" id="text">
                    <div class="input-group-btn">
                        <button class="btn btn-success btn-addmember">
                            <i class="glyphicon glyphicon-plus">
                            </i></button>
                    </div>
                    <div class="input-group-btn">
                        <button class="btn btn-success btn-team1">
                            <i class="glyphicon glyphicon-plus">
                            </i> TEAM1</button>
                    </div>
                    <div class="input-group-btn">
                        <button class="btn btn-success btn-team2">
                            <i class="glyphicon glyphicon-plus">
                            </i> TEAM2</button>
                    </div>
                </div>
                <br>
                <br>
            </div>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Team1</label>
            <textarea class="form-control" id="team1" rows="3">
 vivamus eget lacus vitae mi vulputate varius integer suscipit orci condimentum vestibulum 
 </textarea>
            <label for="exampleFormControlTextarea1">Team2</label>
            <textarea class="form-control" id="team2" rows="3">
 vivamus eget lacus vitae mi vulputate varius integer suscipit orci condimentum vestibulum 
 </textarea>
        </div>
        <p class="copyright">Created by: Me - <a href="mailto:me@me.com">me@me.com</a></p>
    </div>
    <br>
    <h2 class="text text-success">Team Members</h2>
    <br>
    <div class="container-fluid">
        <div id="memberlist" class="row">
        </div>
    </div>
</center>

CSS（添加列间距优化）

.container {
    width: 80%;
    height: auto;
}
.foot {
    position: fixed;
    left: 10%;
    bottom: 0;
    width: 80%;
    text-align: center;
}
.form-group {
    height: 0px;
    visibility: hidden;
}
.copyright {
    width: 100%;
    text-align: right;
}
/* 给列添加底部间距，避免条目拥挤 */
#memberlist .col-sm-6 {
    margin-bottom: 10px;
}

JavaScript（核心修改部分）

$(document).ready(function() {
    // 添加单个成员
    $('.btn-addmember').click(function() {
        if ($('#text').val().length != 0) {
            var x = $('#memberlist').html();
            // 把Alert包裹在col-sm-6列容器里（两列布局）
            var y = `<div class="col-sm-6">
                <div class="alert alert-success alert-dismissible fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    ` + $('#text').val() + `
                </div>
            </div>`;
            $('#memberlist').html(y + x);
            $('#text').val("");
        } else alert("Please, enter the name of the member");
    });
    // 添加team1成员
    $('.btn-team1').click(function() {
        if ($('#team1').val().length != 0) {
            var members = $('#team1').val().split('\n');
            for (var i = 0; i < members.length; i++) {
                var x = $('#memberlist').html();
                // 同样包裹在col-sm-6里
                var y = `<div class="col-sm-6">
                    <div class="alert alert-success alert-dismissible fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                        <b>` + members[i] + `</b>
                    </div>
                </div>`;
                if (members[i].trim().length > 0) {
                    $('#memberlist').html(y + x);
                }
            }
        }
    });
    // 添加team2成员 - 修复了选择器错误，改为操作#memberlist
    $('.btn-team2').click(function() {
        if ($('#team2').val().length != 0) {
            var members = $('#team2').val().split('\n');
            for (var i = 0; i < members.length; i++) {
                var x = $('#memberlist').html();
                var y = `<div class="col-sm-6">
                    <div class="alert alert-success alert-dismissible fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                        <b>` + members[i] + `</b>
                    </div>
                </div>`;
                if (members[i].trim().length > 0) {
                    $('#memberlist').html(y + x);
                }
            }
        }
    });
    // 点击成员标记完成/未完成
    $(document).on('click', '.alert', function() {
        if ($(this).css('text-decoration-line') == "none") {
            $(this).css('text-decoration-line', 'line-through');
            $(this).css('background-color', '#dddddd');
            $(this).css('border-color', '#dddddd');
        } else {
            $(this).css('text-decoration-line', 'none');
            $(this).css('background-color', '#dff0d8');
            $(this).css('border-color', '#d6e9c6');
        }
    });
});

关键修改说明 #

1. 多列布局实现：把每个Alert都放在col-sm-6容器中，这样在屏幕宽度≥768px时会自动排成两列，小屏幕下会自动变成单列，完美适配响应式需求。如果想要三列布局，只需要把col-sm-6改成col-sm-4即可。
2. 修复选择器错误：把btn-team2中的$('.container').html()改成$('#memberlist').html()，避免覆盖整个页面容器的内容。
3. 间距优化：在CSS中给#memberlist .col-sm-6添加了margin-bottom:10px，让条目之间有合适的间距，提升视觉体验。

这样修改后，你的成员列表就能完美实现两列（或三列）排列啦！

内容的提问来源于stack exchange，提问作者VORiAND