如何将 Bootstrap 警报排列成两列？

Question

我有一个非常简单的待办事项页面，我可以在其中输入成员并删除它们或将它们标记为已完成。成员是 Bootstrap 警报，到目前为止一切顺利。

我的问题是，alert/members 太宽了，应该分为两列或三列，以便能够在屏幕上查看更多内容。

这就是我卡住的地方，因为网格系统不需要它。我不知道我错过了什么...

谁能帮我，如何将成员列表重新排列成两列或三列？

我尝试使用带有 team1 按钮的列。

这是它的 JSFiddle URL：https://jsfiddle.net/voriand/zsfo65wb/

$(document).ready(function() {
  $('.btn-addmember').click(function() {
    if ($('#text').val().length != 0) {
      var x = $('#memberlist').html();
      var y =
        `<div class="alert alert-success alert-dismissible fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            ` + $('#text').val() + `</div>`;
      $('#memberlist').html(y + x);
      $('#text').val("");
    } else alert("Please, enter the name of the member");
  });
  
  //Adding members of 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();
        var y =
          `<div class="col-sm"><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);
        }
      }
    }
  });

  //Adding members of team2
  $('.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 = $('.container').html();
        var y =
          `<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>`;
        if (members[i].trim().length > 0) {
          $('.container').html(y + x);
        }
      }
    }
  });
  // When Member is clicked
  $(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');
    }
  });
});

.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;
}

<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>

Answer 1

澄清HTML:
- 使用CSSmargin属性代替<br>
- 使用 text-center class 代替 center 标签
- 将页脚放在 <footer> 标签中 HTML 的末尾
- 使用 .container 而不是 .container-fluid 和空列
- 使用层次结构 .form-inline > .input-group > .input-group-btn 将输入和按钮组织为内联形式
CSS:
- 我删除了一些 CSS 指令并恢复了原来的行为 Bootstrap 的容器。我建议使用 Bootstrap 4 或 5 flex-boxes 实现更灵活的可能性。
- 我为 form-inline 块添加了样式以改进其在窄屏幕上的布局。
重做 JS:
- 将警报 HTML 代码包装在单独的函数中 addMember
- 再添加一项功能，通过文本区域的 id 添加团队
- 借助这两个函数简化 click 按钮代码
- 使用 .toggleClass() 而不是 .css() 来更改点击时的警报外观
- 使用.append()在列表末尾添加新提醒
创建栏目：
- 将提醒包裹在列块中以将多个提醒排成一行。
- 添加两个 classes col-xs-6 col-sm-4 以在移动设备上以 2 列和在宽屏幕上以 3 列组织警报。
- 现在 Bootstrap 的可以取消 alerts 是不够的，因为我们也必须删除列块。所以我们可以删除 alert-dismissible class 和 data-dismiss 属性。我也通过 jQuery 添加了替代成员关闭代码。

https://codepen.io/glebkema/pen/jOLJYJE

$(document).ready(function() {
  var memberList = $("#memberlist");

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

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

  $(".btn-addmember").click(function() {
    var newMember = $("#text").val().trim();
    if (newMember) {
      addMember(newMember);
    } else {
      alert("Please, enter the name of the member");
    }
    $("#text").val("");
  });

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

  function addMember(member) {
    member = member.trim();
    if (member) {
      memberList.append(
        `<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
        `<span class="close" aria-label="close">&times;</span>` +
        member +
        `</div></div>`
      );
    }
  }

  function addTeam(id) {
    var team = $("#" + id).val().trim();
    if (team) {
      var members = team.split("\n");
      console.log(members);
      for (var i = 0; i < members.length; i++) {
        addMember(members[i]);
      }
    }
  }
});

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

/* create a class for .toggleClass() */
.alert.member-clicked {
  text-decoration-line: line-through;
  background-color: #ddd;
  border-color: #ddd;
}

/* use margin instead of <br> */
.copyright {
  margin-top: 10px;
}

/* use these values not only when the screen is wider than 768 pixels */
.form-inline.form-members .input-group {
  display: inline-table;
  vertical-align: middle;
}
.form-inline.form-members .input-group .input-group-btn {
  width: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h2 class="text text-success text-center">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">
        <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>
    </div>

    <div class="form-group hidden">
      <label for="exampleFormControlTextarea1">Team1</label>
      <textarea class="form-control" id="team1" rows="7">
        1 vivamus eget 
        1 lacus vitae 
        1 mi vulputate 
        1 varius integer 
        1 suscipit orci 
        1 condimentum
        1 vestibulum
      </textarea>

      <label for="exampleFormControlTextarea1">Team2</label>
      <textarea class="form-control" id="team2" rows="7">
        2 vivamus eget 
        2 lacus vitae 
        2 mi vulputate 
        2 varius integer 
        2 suscipit orci 
        2 condimentum
        2 vestibulum
      </textarea>
    </div>

    <p class="copyright text-right">Created by: Me - <a href="mailto:me@me.com">me@me.com</a></p>
  </div>
</footer>

Answer 2

无论您的布局可以改进多少，这里的其他答案已经为您完成了。但是，如果您只想将警报分成 3 列而不必更改整个代码，只需添加 class col-sm-4（这将在小屏幕尺寸的视口上产生 3 列）在您将值分配给 y 的 JS 行上。因此，该特定语句现在变为：

var y = "<div class='alert alert-success alert-dismissible fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a>" + $('#text').val() + "</div>";

如何将 Bootstrap 警报排列成两列？

How to arrange Bootstrap alerts into two columns?

html

javascript

jquery

alert

twitter-bootstrap