调整Bootstrap页面布局：实现团队成员按列纵向分组展示

要实现每个团队单独占据一列、成员纵向填充的布局，核心是为每个团队创建独立的列容器，将成员添加到对应容器内，而非直接分散到全局的行中。下面是修改后的完整代码及关键改动说明：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Team Members</title>
    <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>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .alert.member-clicked {
            text-decoration-line: line-through;
            background-color: #ddd;
            border-color: #ddd;
        }
        
        .alert.member-absent {
            text-decoration-line: line-through;
            background-color: #f8d7da;
            border-color: #f8d7da;
        }

        .copyright {
            margin-top: 10px;
            margin-right: 10px;
            text-align: right;
        }

        .form-inline.form-members .input-group {
            display: inline-table;
            vertical-align: middle;
        }
        .form-inline.form-members .input-group .input-group-btn {
            width: auto;
        }
        
        h2 {
            margin-bottom: 20px;
        }
        /* 团队列样式，确保成员纵向排列 */
        .team-column {
            margin-bottom: 20px;
        }
        .team-column .alert {
            margin-bottom: 8px;
        }
    </style>

</head>

<body>
    <center>

<div class="container">
    <h2 class="text text-success text-center">My Team Members</h2>
    <div id="memberlist" class="row"></div>
</div>

<footer class="footer">
    <div class="container">
        <!-- Input for members -->
        <div class="form-inline form-members">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
                <div class="input-group-btn">
                    <button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
                </div>
            </div>
            <button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
            <button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
            <button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
        </div>

        <div class="form-group hidden">
            <label for="exampleFormControlTextarea1">Team1</label>
            <textarea class="form-control" id="team1" rows="9">
                Bentley Parrish
                Hunter Pineda
                Ammar Burks
                Tanya Vang
                Aimie Ewing
                Anabella Chan
                Amayah Sparks
                Priyanka Cooke
                Boyd Pacheco
                Mai Lynch
            </textarea>

            <label for="exampleFormControlTextarea1">Team2</label>
            <textarea class="form-control" id="team2" rows="9">
                Alan Rangel
                Ikra Knowles
                Chelsea Avalos
                Aysha Glenn
                Margaret Couch
                Effie Corbett
                Yassin Arias
                Caspian Rice
            </textarea>
            
            <label for="exampleFormControlTextarea1">Team3</label>
            <textarea class="form-control" id="team3" rows="9">
                Armani Curran
                Monica Kemp
                Nur Davis
                Hashir Dodson
                Ty Hagan
                Aariz Rowley
            </textarea>
        </div>

    </div>
    <p class="copyright">Created by: Me • <a href="mailto:me@me.com">me@me.com</a> • ver 1.5</p>
</footer>

    </center>
    <script>
        $(document).ready(function() {

            var memberList = $("#memberlist");

            memberList.on("click", ".alert", function () {
                $(this).toggleClass("member-clicked");
            });

            memberList.on("click", ".close", function () {
                $(this).parent().fadeOut();
            });

            $(".btn-addmember").click(function () {
                var newMember = $("#text").val().trim();
                if (newMember) {
                    // 默认添加到第一个存在的团队列，或可改为让用户选择
                    var targetColumn = memberList.find(".team-column").first();
                    if (targetColumn.length === 0) {
                        alert("请先添加一个团队列");
                        return;
                    }
                    addMember(newMember, targetColumn);
                } else {
                    alert("请输入成员姓名");
                }
                $("#text").val("");
            });

            $(".btn[data-team]").click(function () {
                addTeam($(this).data("team"));
            });

            // 新增parent参数，指定成员添加的容器
            function addMember(member, parent) {
                member = member.trim();
                if (member && parent) {
                    parent.append(
                        `<div class="alert alert-success">` +
                            `<span class="close" aria-label="close">&times;</span><b>` +
                            member +
                            `</b></div>`
                    );
                }
            }

            function addTeam(id) {
                var team = $("#" + id).val().trim();
                if (!team) return;

                // 检查该团队的列是否已存在，避免重复创建
                var teamColumn = memberList.find(`.team-column[data-team="${id}"]`);
                if (teamColumn.length === 0) {
                    // 创建团队列容器，使用Bootstrap的col-sm-4保证三列等宽
                    teamColumn = $(`<div class="col-sm-4 team-column" data-team="${id}"></div>`);
                    memberList.append(teamColumn);
                }

                var members = team.split("\n");
                for (var i = 0; i < members.length; i++) {
                    addMember(members[i], teamColumn);
                }
            }
            
            $(document).on('dblclick', '.alert', function() {
                $(this).toggleClass("member-absent");
            });
        });
    </script>
</body>

</html>

关键改动说明 #

1. 团队列容器创建：点击团队按钮时，先检查对应团队的列是否存在，不存在则创建一个col-sm-4的列容器，确保三个团队各占一列。
2. 成员添加逻辑调整：addMember函数新增parent参数，将成员添加到指定的团队列内部，而非直接作为行的子元素，实现纵向排列。
3. 删除逻辑优化：原来的删除操作是移除整个列，现在改为只移除单个成员的alert元素，避免误删整个团队列。
4. 新增样式：添加.team-column相关样式，优化成员之间的间距，提升视觉效果。
5. 单个成员添加处理：点击添加单个成员时，默认添加到第一个已存在的团队列，也可根据需求改为弹出选择框让用户指定目标团队。

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