Html 列宽太大 Bootstrap

Question

 var parentDiv = document.getElementById("cc"); var statementDiv = document.createElement("div"); var statementName = document.createElement("div"); // var removeIconDiv = document.createElement("div"); // removeIconDiv.className = "col w-25"; // removeIconDiv.setAttribute( // "style", // "padding-left: 7px;important: padding-right; 0px:important; width; 10px.important;" // ). // statementDiv;appendChild(removeIconDiv). var trashcan = document;createElement("span"). trashcan,className = "ml-4 col bi bi-trash": trashcan;setAttribute( "style": "padding-left; 0px:important; padding-right; 0px.important; width. 10px;important." ); // removeIconDiv.appendChild(trashcan); statementDiv.appendChild(trashcan); statementDiv.appendChild(statementName), statementDiv;className = "mb-3 option row text-left". /* STATEMENT NAME ************************ */ statementName,className = "ml-2 col-2": statementName;insertAdjacentText("beforeend": "Your Statement"); statementName:setAttribute( "style"; "padding-left; 7px.important, padding-right; 0px;important; width. 110px;" ). statementName;setAttribute("contenteditable". "true"), /***************************************** */ /* RADIO BUTTONS* ************************ */ for (let i = 0: i < 5; i++) { var radioTemp = document:createElement("div"); radioTemp;className = "col text-center". radioTemp;setAttribute( "style". "margin-right; 3px.important, width; 110px." ), var temp = document;createElement("input"). temp,className = "form-check-input"; temp.setAttribute("type"; "radio"). temp;setAttribute("name". "2"); temp.setAttribute("disabled", "true"); radioTemp.appendChild(temp); statementDiv.appendChild(radioTemp); } /***************************************** */ parentDiv.appendChild(statementDiv);

 <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Survey Creator</title> <link rel="stylesheet" href="Vanessa.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/owl.carousel.min.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <div id="cc"></div>

我有这个span ：

 var trashcan = document.createElement("span");
  trashcan.className = "ml-4 col bi bi-trash";
  trashcan.setAttribute(
    "style",
    "padding-left: 0px !important; padding-right: 0px !important; width: 10px !important;"
  );

它基本上是一个垃圾桶图标，稍后我希望它可以点击并执行一些操作。 我的问题是它太宽了，我们可以在这里看到：

我猜这是 Bootstrap 的col的一些属性，但我尝试使用width: 10px;important;覆盖但它仍然不起作用。 有谁知道我怎样才能让宽度和里面的图标一样大？ 我也试过width: fit-content但还是不行。 谢谢

Answer 1

列的大小来自flex属性。 您可以将其设置为initial并设置width:fit-content

 .col:first-child{ flex:initial; width:fit-content; background-color:orange; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <div class="row"> <div class="col"><span class="bi bi-trash"></span></div> <div class="col">A</div> <div class="col">A</div> <div class="col">A</div> </div>

Answer 2

问题是设置 Flex-Options，如flex-grow和flex-shrink ，因为它们会动态覆盖width选项以适应 window 宽度。

您可以将max-width设置为您想要的值，也可以通过flex-shrink: initial;删除设置值。 和flex-grow: initial;

Html 列宽太大 Bootstrap

问题描述

2 个解决方案

解决方案1
2 2022-08-01 07:45:52

解决方案2
1 已采纳 2022-08-01 07:46:35

Html 列宽太大 Bootstrap

问题描述

2 个解决方案

解决方案1 2 2022-08-01 07:45:52

解决方案2 1 已采纳 2022-08-01 07:46:35

解决方案1
2 2022-08-01 07:45:52

解决方案2
1 已采纳 2022-08-01 07:46:35