响应式设计（断点） - 将所有内容放在一列中

Question

我将一个页面分为两列。当我缩小屏幕时，有什么方法可以将所有内容都放在一列中？

此时，当我缩小屏幕时，卡片的宽度会减小（如图所示）。有没有办法将所有卡片放在一列（在移动设备上）以保持宽度为 100%？ 有没有办法将所有内容放在一列中，并且元素之间有一个边距？

谢谢。

Stackblitz - DEMO

代码

<div style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden;">
  <div style="width: 100%; height: 85%"> 
    <div class="modal-body row" style="overflow: auto; margin-top: 135px; height: 100%;">
      <div class="col-md-6">
        <div style="height: 700px;">
          <div class="container">      
          </div>     
          <div class="row">
            <div class="Upcard">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="row" style="height: 100%;">
          <div class="col-6">
            <div class="card cardBig" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
              <div class="card-header header">
                <h1> It </h1>
              </div>
              <div class="card-body">              
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="card" style="margin-left: 8px; margin-right: 16px; line-height: 1;">
              <div class="card-header header">
                <h1> data </h1>
              </div>
              <div class="card-body">       
              </div>
            </div>
            <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-y: auto; overflow-x: hidden;">              
              </div>
            </div>
            <div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
              <div class="card-header header">
                <h1> Att </h1>
              </div>
              <div class="card-body att" style="overflow-x: hidden; overflow-y: auto;">         
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

请试试这个 sn-p。

.card {
  width: 100%;
  height: 50%;
  margin-bottom: 16px;
  background: red 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 20px #BCBCCB47;
  border-radius: 8px;
  opacity: 1;
  border: none;
}

.cardBig {
  height: calc(100% - 16px);
}

.card-small {
  height: 23%;
}


/* ---------------------------UPLOAD----------------------------------- */


.container {
  width: 100%;
  height: 100%;
  padding: 2rem;
  text-align: center;
  border: dashed 4px blue;
  position: relative;
  margin: 0 auto;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden;">
  <div style="width: 100%; height: 85%">
    <div class="modal-body row" style="overflow: auto; margin-top: 135px; height: 100%;">
      <div class="col-md-6 col-sm-12">
        <div style="height: 700px;">
          <div class="container">
          </div>
          <div class="row">
            <div class="Upcard">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="row" style="height: 100%;">
          <div class="col-md-6 col-sm-12">
            <div class="card cardBig">
              <div class="card-header header">
                <h1> It </h1>
              </div>
              <div class="card-body">
              </div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12">
            <div class="card">
              <div class="card-header header">
                <h1> data </h1>
              </div>
              <div class="card-body">
              </div>
            </div>
            <div class="card card-small">
              <div class="card-header header">
                <h1> T </h1>
              </div>
              <div class="card-body" style="overflow-y: auto; overflow-x: hidden;">
              </div>
            </div>
            <div class="card card-small">
              <div class="card-header header">
                <h1> Att </h1>
              </div>
              <div class="card-body att" style="overflow-x: hidden; overflow-y: auto;">
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
                <p>asdasdasdasdasdasdasdas</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>