Question

我无法解决的bs4盒子遇到很多麻烦。最主要的问题是，在某些浏览器尺寸下，中间3个框中的文本不能正确换行，因此不能保留在该框中。大小为600-767.98px和768-991.98px（数字来自Dreamweaver）。在其他浏览器问题上，确实会发生此问题。

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 alert-banner">
<h1 class="bg-danger text-white mr-md-3 px-md-5 text-center overflow- 
hidden">Applications for crew and production staff are up on the information 
page</h1>
</div>
<div class="bg-dark">

 <div class="container-fluid w-100 overflow-hidden">
  <div class="row">

  <a class="col-sm bg-dark my-5 ml-3 text-center box-1 mr-sm-3 pt-3 px-3 pt- 
 md-5 px-md-5" href="Tickets">
    <div class="my-3 p-3">
      <h2 class="font-weight-bold">Tickets</h2>
      <h3>Buy tickets here</h3>
    </div>
  </a>

  <a class="col-sm bg-primary my-5 text-center box-2 pt-3 px-3 pt-md-5 px- 
md-5 overflow-hidden "href="for-students">
    <div class="my-3 p-3">
      <h2 class="font-weight-bold">Information</h2>
      <h3>All forms, documents, and important information will be here</h3>
    </div>
  </a>

  <a class="col-sm my-5 mr-3 ml-3 text-center box-3  mr-md-3 pt-3 px-3 pt-md-5 px-md-5" href="#">
    <div class="my-3 p-3">
    <h2 class="font-weight-bold">Previous Years (coming soon)</h2>
    <h3>View photos from previous shows</h3>
    </div>
  </a>
</div>

<div class="row mx-auto">
  <div class="mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden col-sm bg-dark">
    <h2 class="display-5">Want to buy an ad on this site to sponsor the play?</h2>
    <p class="lead">Email us - <a href="mailto:production@bmhsmusical.com">production@bmhsmusical.com</a> (Limited quantity available)</p>
  </div>

</div>

Answer 1

您只需删除不需要的填充类，例如mr-3,pl-2,pt-md-5。只需添加col-sm-4即可拆分列并仅添加一个相等的填充类。尝试以下示例，希望它适合您。

.box-1,.box-2,.box-3 {
    display: flex;
    flex-wrap: wrap;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <div class="alert-banner m-3">
    <h1 class="bg-danger text-white text-center p-3">Applications for crew and production staff are up on the information page</h1>
  </div>
  <div class="bg-dark">
      <div class="container-fluid w-100 overflow-hidden">
          <div class="row text-center equl-col py-5">
              <a class="col-sm-4 box-1 mb-3 mb-sm-0" href="Tickets">
                  <div class="bg-danger d-flex w-100">
                      <div class="p-3 align-self-center w-100">
                          <h2 class="font-weight-bold">Tickets</h2>
                          <h3>Buy tickets here</h3>
                      </div>
                  </div>
              </a>
              <a class="col-sm-4 box-2 mb-3 mb-sm-0" href="for-students">
                  <div class="bg-primary d-flex w-100">
                    <div class="p-3 align-self-center w-100">
                      <h2 class="font-weight-bold">Information</h2>
                      <h3>All forms, documents, and important information will be here</h3>
                    </div>
                  </div>
              </a>
              <a class="col-sm-4 box-3 mb-3 mb-sm-0" href="#">
                <div class="bg-danger d-flex w-100">
                  <div class="p-3 align-self-center w-100">
                      <h2 class="font-weight-bold">Previous Years (coming soon)</h2>
                      <h3>View photos from previous shows</h3>
                  </div>
                </div>
              </a>
          </div>
          <div class="mx-auto">
              <div class="p-3 text-center overflow-hidden col-sm bg-dark">
                  <h2 class="display-5">Want to buy an ad on this site to sponsor the play?</h2>
                  <p class="lead">Email us - <a href="mailto:production@bmhsmusical.com">production@bmhsmusical.com</a> (Limited quantity available)</p>
              </div>
          </div>
       </div>
   </div>

将文字正确包装在bs4框中

1 个答案: