ul 中的引导列

Question

我试图根据屏幕大小将列表分成 2 行，因为在较小的屏幕上，信息未正确显示（A、B、C... 只是虚拟信息；真实信息包含在表示州）你可以在图片上看到吗

我的 html 中有这段代码

.card {
  z-index: 0;
  background-color: #ECEFF1;
  padding-bottom: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  border-radius: 10px;
}

.top {
  padding-top: 40px;
  padding-left: 13% !important;
  padding-right: 13% !important
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: #455A64;
  padding-left: 0px;
  margin-top: 30px
}

#progressbar .text {
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
}

#progressbar li {
  list-style-type: none;
  font-size: 13px;
  width: 16.6%;
  float: left;
  position: relative;
  font-weight: 400
}

#progressbar .step0:before {
  font-family: "Material Icons";
  content: "\e14c";
  color: #fff
}

#progressbar li:before {
  width: 40px;
  height: 40px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  background: #C5CAE9;
  border-radius: 50%;
  margin: auto;
  padding: 0px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 12px;
  background: #C5CAE9;
  position: absolute;
  left: 0;
  top: 16px;
  z-index: -1
}

#progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: absolute;
  left: -50%
}

#progressbar li:nth-child(2):after,
#progressbar li:nth-child(3):after,
#progressbar li:nth-child(4):after,
#progressbar li:nth-child(5):after,
#progressbar li:nth-child(6):after {
  left: -50%
}

#progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  position: absolute;
  left: 50%
}

#progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

#progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #1678e9
}

#progressbar li.active:before {
  font-family: "Material Icons";
  content: "\e876"
}

<div class="card">
  <div class="row d-flex px-3 justify-content-center top">
    <div class="d-flex justify-content-center text-center">
      <h5>Consulta <span class="text-primary font-weight-bold">#6152</span></h5>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div class="col-12">
      <ul id="progressbar" class="text-center">
        <li [ngClass]="estado >= 1 ? 'active step0' : 'step0'">
          <div class="text">A</div>
        </li>
        <li [ngClass]="estado >= 2 ? 'active step0' : 'step0'">
          <div class="text">B</div>
        </li>
        <li [ngClass]="estado >= 3 ? 'active step0' : 'step0'">
          <div class="text">C</div>
        </li>
        <li [ngClass]="estado >= 4 ? 'active step0' : 'step0'">
          <div class="text">D</div>
        </li>
        <li [ngClass]="estado >= 5 ? 'active step0' : 'step0'">
          <div class="text">E</div>
        </li>
        <li [ngClass]="estado >= 6 ? 'active step0' : 'step0'">
          <div class="text">F</div>
        </li>
      </ul>
    </div>
  </div>
</div>

我该如何解决这个问题？我已经尝试使用引导网格，但我无法解决这个问题。我还将列表分成 2 份，但我想这不是最好的解决方案，因为在更宽的屏幕上它仍然是分开的。

如果我想要做/拥有的事情有更好、更简单的解决方案，我想知道。提前致谢

UPDATE1：我解决了在“#progessbar .text”上将自动换行分配给正常的文本问题

Answer 1

我添加了一个媒体查询，它在小于 700 像素的屏幕上提供 li width: 33%;。

@media (max-width: 700px) {
  #progressbar li {
    width: 33%;
  }
}

所以它们将是 2 行，每行 3

.card {
  z-index: 0;
  background-color: #ECEFF1;
  padding-bottom: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  border-radius: 10px;
}

.top {
  padding-top: 40px;
  padding-left: 13% !important;
  padding-right: 13% !important
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: #455A64;
  padding-left: 0px;
  margin-top: 30px
}

#progressbar .text {
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
}

#progressbar li {
  list-style-type: none;
  font-size: 13px;
  width: 16.6%;
  float: left;
  position: relative;
  font-weight: 400
}

#progressbar .step0:before {
  font-family: "Material Icons";
  content: "\e14c";
  color: #fff
}

#progressbar li:before {
  width: 40px;
  height: 40px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  background: #C5CAE9;
  border-radius: 50%;
  margin: auto;
  padding: 0px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 12px;
  background: #C5CAE9;
  position: absolute;
  left: 0;
  top: 16px;
  z-index: -1
}

#progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: absolute;
  left: -50%
}

#progressbar li:nth-child(2):after,
#progressbar li:nth-child(3):after,
#progressbar li:nth-child(4):after,
#progressbar li:nth-child(5):after,
#progressbar li:nth-child(6):after {
  left: -50%
}

#progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  position: absolute;
  left: 50%
}

#progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

#progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #1678e9
}

#progressbar li.active:before {
  font-family: "Material Icons";
  content: "\e876"
}

@media (max-width: 700px) {
  #progressbar li {
    width: 33%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="row d-flex px-3 justify-content-center top">
    <div class="d-flex justify-content-center text-center">
      <h5>Consulta <span class="text-primary font-weight-bold">#6152</span></h5>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div class="col-12">
      <ul id="progressbar" class="text-center">
        <li [ngClass]="estado >= 1 ? 'active step0' : 'step0'">
          <div class="text">A</div>
        </li>
        <li [ngClass]="estado >= 2 ? 'active step0' : 'step0'">
          <div class="text">B</div>
        </li>
        <li [ngClass]="estado >= 3 ? 'active step0' : 'step0'">
          <div class="text">C</div>
        </li>
        <li [ngClass]="estado >= 4 ? 'active step0' : 'step0'">
          <div class="text">D</div>
        </li>
        <li [ngClass]="estado >= 5 ? 'active step0' : 'step0'">
          <div class="text">E</div>
        </li>
        <li [ngClass]="estado >= 6 ? 'active step0' : 'step0'">
          <div class="text">F</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

我正在尝试根据屏幕大小将我的列表分成 2 行...我该如何解决这个问题？我已经尝试过使用引导网格，但我 无法解决这个问题。我也将列表分成 2，但我猜它是 不是最好的解决方案，因为在更宽的屏幕上它仍然存在 分开。

您仍然可以挽救您的“将列表拆分为 2”的实现。只需使用Bootstrap Flex Utility。
在宽屏/小屏上测试下面的代码。您将看到内容在较小的屏幕上折叠成 2 行，而在宽屏幕上保持直线 1 行。

出于响应目的，只需将min-width 分配给列表容器（在本例中为ul.sample-list），这样您就可以确定何时开始包装内容。你会想要在 Media Queries 中执行此操作。

.sample-list {
  padding: 0;
}

.estado {
  list-style-type: none;
  margin: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="d-flex flex-wrap">
  <ul class="sample-list d-flex">
    <li class="estado">Lorem ipsum</li>
    <li class="estado">Lorem ipsum</li>
    <li class="estado">Lorem ipsum</li>
  </ul>
  <ul class="sample-list d-flex">
    <li class="estado">Lorem ipsum</li>
    <li class="estado">Lorem ipsum</li>
    <li class="estado">Lorem ipsum</li>
  </ul>
</div>