Bootstrap 4，弹性盒|如何使 <li> 元素适合容器宽度答案

【问题标题】：Bootstrap 4, Flexbox| How to make <li> elements fit to containers widthBootstrap 4，弹性盒|如何使 <li> 元素适合容器宽度
【发布时间】：2020-11-04 09:28:31
【问题描述】：

我在尝试拉伸我的 li 元素以适应容器的宽度时遇到了很多问题。我尝试弄乱每个 li 的宽度并弄乱其他 Flexbox 实用程序以尝试使其正常工作，但无济于事。 那么，我怎样才能改变每个 li 的宽度以适应容器的宽度，就像与 待办事项列表 标题和文本框？

这是网页的图片： https://i.stack.imgur.com/7WgR9.png

然后这是我的 HTML 和 CSS：

body {
  font-family: Roboto;
  background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}

.heading {
    background-color: #2980b9;
    color: white;
}

.container {
    margin-top: 100px;
    width: 400px;
    padding: 0;
}

ul {
    list-style-type: none;
}

.item {
    background-color: #fff;
    width: 100%;
}

.item:nth-child(2n) {
    background-color: #f7f7f7;
}

.header {
    font-size: 24px;
    font-weight: normal;
}

input {
    width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container">
            <div class="row d-flex justify-content-between align-items-center heading">
                <h1 class="ml-4 header">TO-DO LIST</h1>
                <h4><i class="fa fa-plus mr-2 mt-2" aria-hidden="true"></i></h4>
            </div>
        <div class="row d-flex">
            <input class= "pb-5"type="text" placeholder="Add New Todo">
        </div>
        <div>
            <ul class="row d-flex no-gutter">
                <div class="d-flex row item"><li><span>X</span> Row 1</li></div>
                <div class="d-flex row item"><li><span>X</span> Row 2</li></div>
                <div class="d-flex row item"><li><span>X</span> Row 3</li></div>
            </ul>
        </div>
    </div>
</body>

【问题讨论】：

标签： javascript html css bootstrap-4 flexbox

【解决方案1】：

您的语法在某些地方是错误的，并考虑利用现有的 Bootstrap 布局类来获得相同的效果。请参阅下面的结果，我认为它更像您所追求的。干杯

body {
  font-family: Roboto;
  background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}

.heading {
    background-color: #2980b9;
    color: white;
}

.container {
    margin-top: 100px;
    width: 400px;
}

.list-group-item:first-child {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.list-group li:nth-child(2n) {
    background-color: #f7f7f7;
}

.header {
    font-size: 24px;
    font-weight: normal;
}

input {
    width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row d-flex justify-content-between align-items-center heading">
      <h1 class="ml-4 header">TO-DO LIST</h1>
      <h4><i class="fa fa-plus mr-2 mt-2" aria-hidden="true"></i></h4>
  </div>
  <div class="row">
      <input class="pb-5" type="text" placeholder="Add New Todo">
  </div>
  <ul class="row list-group">
      <li class="list-group-item"><span>X</span> Row 1</li>
      <li class="list-group-item"><span>X</span> Row 2</li>
      <li class="list-group-item"><span>X</span> Row 3</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

Al parecer no estas siguiendo el parents de diseño de bootstrap, que es el siguiente：

显然你没有遵循引导设计模式，如下：

root-body
    div->.container
        div->.row
          div->.column
            div->.row
              ul->.list w-100
                 li/ul->.your-classname w-100

En tu ejemplo, no estas agregando el div con el column y el hijo row con las clase w-100 de bootstrap para forzar el elemento a que utilice el 100% del ancho de la pantalla。

在您的示例中，您没有添加带有列的 div 和带有引导 w-100 类的行子项，以强制元素使用 100% 的屏幕宽度。

【讨论】：