Bootstrap 列在 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>

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

如果有更好更简单的解决方案来解决我正在尝试的问题 do/have，我很想知道。提前致谢

更新 1：我通过在“#progessbar .text”

上将 word-wrap 分配给 nomal 的文本解决了这个问题

Answer 1

I'm trying to break my list into 2 rows depending on the screen size ... How can I solve this? I already tried to use bootstrap grid but I couldn't fix that. I also split the list into 2 but I guess that it's not the best solution because on a wider screen it still remains divided.

您仍然可以挽救“将列表拆分为 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>

Answer 2

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

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

所以他们将排成两行，每行 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>

Bootstrap 列在 ul 中

Bootstrap columns inside ul

html

css

angular-ui-bootstrap