Question

我无法设法将文本包装在卡的标题中。我在php中回显了该卡，除了在屏幕外直接运行的标头外，它的输出效果非常好。

echo '<div id="accordion">';
echo '<div class="card">';
echo '<div class="card-header" id="heading'.$collapseID.'">';
echo '<h5 class="mb-0">';
echo '<button class="btn btn-link collapsed text-left" data-toggle="collapse" data-target="#collapse'.$collapseID.'" aria-expanded="false" aria-controls="collapse'.$collapseID.'">';
echo 'Header: This just runs right off the screen....asdf jkl; asdf jkl; asdf jkl; asdf jkl';
echo '</button>';
echo '</h5>';
echo '</div>';

寻找标题只是包装在标题框中，而不是在屏幕之外运行。

Answer 1

这是一个简单的示例，没有自定义类/ CSS。您可以在此处的代码段中重现该问题吗？

下面的代码可以根据需要使用自动换行效果：

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

<div class="container">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">

    <div class="card-header" id="heading'.$collapseID.'">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed text-left" data-toggle="collapse" data-target="#collapse'.$collapseID.'" aria-expanded="false" aria-controls="collapse'.$collapseID.'">
Header: This just runs right off the screen....asdf jkl; asdf jkl; asdf jkl; asdf jkl
</button>
      </h5>
    </div>
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
</div>

更新：将引导程序版本从4.3.1更改为4.0.1

文字没有换成卡片标题

1 个答案: