Question

数字将转到下一行，如何在不更改其他大小的情况下将它们调整为同一行？

全屏运行以下脚本：

.card-body {
  display: flex;
}

.card-title {
  margin-left: auto;
  font-family: 'Yatra One', cursive;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 10vw;
    word-break: break-all;
  }
}

.col-10 {
  height: 65px;
}

.col-2 {
  height: 65px;
}

.img-fluid {
  height: 100%!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Yatra+One&display=swap" rel="stylesheet">



<div class="row">

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005243</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005243</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">1111111111</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

</div>

数字将转到下一行，如何在不更改其他大小的情况下将它们调整为同一行？

还如何在中间显示数字？（顶部和底部的空间相同）

Answer 1

您可以添加margin: auto使其居中，并添加white-space: nowrap防止它们环绕到下一行。另外，我建议在调整屏幕大小和/或使块变大时使字体变小。

如果您希望它们绝对居中并且不关心图像重叠，请给它们：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Answer 2

Boostrap默认将word-break: break-all;更改为word-break: keep-all;

阅读此 word-break w3 school

@media (min-width: 768px)
.card-title {
  font-size: 3vw;
  word-break: keep-all !important;
}

在Bootstrap 4中自动调整文字大小

2 个答案: