带引导的响应式 <div>答案

【问题标题】：Responsive <div> with bootstrap带引导的响应式 <div>
【发布时间】：2021-06-14 13:06:25
【问题描述】：

I wanna make "kanban" style div section.. so div section have to be responsive and continue to right with sliding.But as picture each time I push "istasyon ekle" div section goes down to continue..

what I want is in the second picture...

我尝试的是：

function addrow(id) {
  divarea = document.getElementById("kanbanrow");
  var btn = document.createElement("DIV");
  btn.className = "col";

  btn.innerHTML = "CLICK ME";
  divarea.appendChild(btn);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>


<button class="btn btn-outline-success float-end" onclick="addrow(this.id)" id="addstation" type="button">İSTASYON EKLE</button>

<div class="container container-fluid" id="mainpage">

  <div class="row float-xl-start row-cols-auto table-responsive" id="kanbanrow">

    <div class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </div>
    <div class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </div>

  </div>

</div>

【问题讨论】：

标签： javascript html twitter-bootstrap kanban

【解决方案1】：

在更多的 12 列中从左到右移动将是一个问题，这是可能的，但它会失去形式。保持表单最好的方法是添加代码来滚动。

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
 
}


</style>
</head>
<body>

<div class="scrollmenu">

    <a class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </a>
    <a class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
       <a class="col-sm">
      <a class="row float-xl-start row-cols-auto table-responsive" id="kanbanrow">
      </a>
      </div>
      <a class="col-sm">
    <button class="btn btn-outline-success float-end" onclick="addrow(this.id)" id="addstation" type="button">İSTASYON EKLE</button>
</a>
  </a>



</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script>
function addrow(id) {
  divarea = document.getElementById("kanbanrow");
  var btn = document.createElement("A");
  btn.className = "col";

  btn.innerHTML = "CLICK ME";
  divarea.appendChild(btn);
}
</script>

【讨论】：

您尝试推送 3 次？看到发生了什么？
我也不想要 12 列.. 我想要 6 列而不是“想要屏幕可以滑动”
谢谢。现在只针对一个问题...我需要将“滑块”放在页面底部...如何？
好的，我刚刚删除了“溢出：自动；”