Question

我有一个包含botstrap 4卡div和pararagraph的部分，我想保持灵活性，

这是HTML：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="marketing-main-page-content_details">
<div class="marketing-main-page-content_details-card">

<div class="marketing-main-page-content_card card " data-related="details2" id="card2">
         <p>Która jest własciawa osoba</p>
      </div>
      </div>

<div class="marketing-main-page-content_description-right" id="details1">
      <div class="title-right">
         <p>Która 1 jest własciawa osoba</p>
      </div>
      <p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie.
         Potem dalsza część tekstu, która ma przekonać do
         zakupu. Przekonany? No to klikamy poniżej i
         lecimy do formularza zamówienia!
      </p>
      <div class="marketing-main-page-content_description-right_button">
         <button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
         się wiecej</button>
      </div>
   </div>

   </div>

这是CSS

.marketing-main-page-content_details {
    display: flex;
    justify-content: space-around;
}
.marketing-main-page-content_card {
    font-size: 25px;
    font-family: Roboto;
    font-weight: normal;
    color: #707070;
}

.marketing-main-page-content_card {
    width: 536px;
    height: 137px;
    font-family: Roboto;
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 0 3px 13px #5C5C5C;
    box-shadow: 0 3px 13px #5C5C5C;
}

.marketing-main-page-content_description-right {
    width: 47%;
    margin-top: 78px;
}

.title-right {
    font-size: 35px;
    font-family: Roboto;
    font-weight: 500;
    color: #707070;
}

.marketing-main-page-content_description-right p {
    font-size: 25px;
    font-family: Roboto;
    margin-top: 28px;
    color: #707070;
    font-weight: normal;
}



.marketing-main-page-content_description-right p {
    font-size: 25px;
    font-family: Roboto;
    margin-top: 28px;
    color: #707070;
    font-weight: normal;
}
.marketing-main-page-content_description-right {
    width: 47%;
    margin-top: 78px;
}

这是jsfiddle：https://jsfiddle.net/Mwanitete/a5e4d7u3/25/

我希望它具有响应能力，但是现在您可以在jsfidle中看到它没有响应，

我需要更改代码以使其具有响应性吗？

Answer 1

我建议阅读"A Complete Guide to Flexbox"以了解Flexbox的工作方式。 display: flex;规则始终适用于您要对齐的项目的容器。我在您的卡片容器中添加了min-width，以使其宽度与正确的容器相同。

我还删除了固定的width规则和CSS中的许多冗余代码。始终确保您的标记有效。这应该是一个响应迅速的工作示例：

.marketing-main-page-content_details {
  display: flex;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.marketing-main-page-content_details-card {
  min-width: 50%;
}

.marketing-main-page-content_card {
  font-size: 25px;
  font-family: Roboto;
  font-weight: normal;
  color: #707070;
  height: 137px;
  font-family: Roboto;
  margin: 20px;
  text-align: center;
  -webkit-box-shadow: 0 3px 13px #5C5C5C;
  box-shadow: 0 3px 13px #5C5C5C;
}

.title-right {
  font-size: 35px;
  font-family: Roboto;
  font-weight: 500;
  color: #707070;
}

.marketing-main-page-content_description-right p {
  font-size: 25px;
  font-family: Roboto;
  margin-top: 28px;
  color: #707070;
  font-weight: normal;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="marketing-main-page-content_details">
  <div class="marketing-main-page-content_details-card">

    <div class="marketing-main-page-content_card card " data-related="details2" id="card2">
      <p>Która jest własciawa osoba</p>
    </div>
  </div>

  <div class="marketing-main-page-content_description-right" id="details1">
    <div class="title-right">
      <p>Która 1 jest własciawa osoba</p>
    </div>
    <p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie. Potem dalsza część tekstu, która ma przekonać do zakupu. Przekonany? No to klikamy poniżej i lecimy do formularza zamówienia!
    </p>
    <div class="marketing-main-page-content_description-right_button">
      <button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
         się wiecej</button>
    </div>
  </div>

</div>

如何使用Flexbox使卡响应？

1 个答案: