logo标签列表

Bootstrap响应式div折叠

htmlcsstwitter-bootstrap
3

我有一个页面分成两半。一边是巨大的盒子，另一边是一组卡片。当我检查页面或增加/减少其大小时，卡片不再响应。小卡片在大盒子之上。目标是当它们交叉时，卡片会下降。

有人可以帮我使这个页面变得响应吗？ 非常感谢

HTML

  <div class="col-md-6">
    <div class="row">
      <div class="col-6">
        <div class="card" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
          <div class="card-header header">
            <h1> M </h1>
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card" style="margin-left: 8px; margin-right: 16px;">
          <div class="card-header header">
            <h1> I </h1>
          </div>
          <div class="card-body">

          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> C </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> D </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> S </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> T </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      </div>
  </div>
</div>

CSS：
.Title{
    width: 150px;
    height: 30px;
    font-family: 'Noto Sans';
    font-size: 20px;
    letter-spacing: 0;
    color: #4D4F5C;

}

.header{
  width: 435px;
  height: 40px;
  background: #ECF2F9 0% 0% no-repeat padding-box;
  border-radius: 8px 8px 0px 0px;
}

.header h1{

text-align: center;
font-family:'Noto Sans';
font-size: 14px;
letter-spacing: 0;
color: #4D4F5C;
}
1个回答
3
他们不具有响应式的原因是你将卡片和.drop项设置为使用像素固定宽度。尝试使用百分比来设置这些项的宽度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接