如何为移动设备将 flex 列包装在单行中

Question

我有一个 HTML 模板，我想为我的数据列表创建一个简单的 flex 列。勾选图标出现在移动设备上的第二行。我希望它在一行中没有换行符。

<div class="container disable-text-selection ">
  <div class="row">
    <div class="col-12">
      <div class="mb-3">
        <h1>Vehicle</h1>
        <div class="text-zero top-right-button-container">
          <button type="button" class="btn btn-danger btn-lg top-right-button mr-1"> + ADD NEW VEHICLE </button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12 list" data-check-all="checkAll">
      <div class="card d-flex flex-row mb-3"> 
          <a class="d-flex" href="Pages.Product.Detail.html"> 
            <img src="../../../../assets/img/bike-thumb.jpg" alt="Honda Shine" class="list-thumbnail responsive border-0 card-img-left" /> 
          </a>
        <div class="pl-2 d-flex flex-grow-1 min-width-zero">
          <div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center"> <br>
            <a href="/app/vehicle" class="w-90 w-sm-50">
                 <p class="list-item-heading mb-0 truncate">Honda Shine </p>
                 <span class="text-muted mb-0">Tysys TCP 2223</span>
            </a>
             <div class="w-10 w-sm-50"> 
                 <a class="d-flex justify-content-end" href="#"> <img src="../../../../assets/img/tick-icon.svg" alt="tick" width="30" class=""/> </a> 
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您的.card-body 包含指向“/app/vehicle”的锚标记和一个包裹另一个锚标记的div。如果您希望 div 与第一个锚标记位于同一行，则需要将 .card-body 显示为 flex-row 而不是 flex-column。

您还想删除<br />。

<div class="card-body d-flex flex-row justify-content-between min-width-zero align-items-center">
    <a href="/app/vehicle" class="w-90 w-sm-50">
        <p class="list-item-heading mb-0 truncate">Honda Shine </p>
        <span class="text-muted mb-0">Tysys TCP 2223</span>
    </a>
    <div class="w-10 w-sm-50"> 
        <a class="d-flex justify-content-end" href="#">
            <img src="https://via.placeholder.com/30" alt="tick" width="30" class=""/>
        </a> 
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/ksg7oz2e/10/

Answer 2

将卡片正文中的 flex-column flex-lg-row 更改为 flex-row。

<div class="container disable-text-selection ">
  <div class="row">
    <div class="col-12">
      <div class="mb-3">
        <h1>Vehicle</h1>
        <div class="text-zero top-right-button-container">
          <button type="button" class="btn btn-danger btn-lg top-right-button mr-1"> + ADD NEW VEHICLE </button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12 list" data-check-all="checkAll">
      <div class="card d-flex flex-row mb-3"> 
          <a class="d-flex" href="Pages.Product.Detail.html"> 
            <img src="../../../../assets/img/bike-thumb.jpg" alt="Honda Shine" class="list-thumbnail responsive border-0 card-img-left" /> 
          </a>
        <div class="pl-2 d-flex flex-grow-1 min-width-zero">
          <div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center"> <br>
            <a href="/app/vehicle" class="w-90 w-sm-50">
                 <p class="list-item-heading mb-0 truncate">Honda Shine </p>
                 <span class="text-muted mb-0">Tysys TCP 2223</span>
            </a>
             <div class="w-10 w-sm-50"> 
                 <a class="d-flex justify-content-end" href="#"> <img src="../../../../assets/img/tick-icon.svg" alt="tick" width="30" class=""/> </a> 
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以在移动设备上使用display:flex

这样的例子：

@media only screen and (max-width: 600px) {
  body {
    display:flex !important;
  }
}