html - 在小屏幕上将 中的 分成两行

Question

我想创建这样的布局:

桌面

移动

但不知道如何实现。到目前为止我有这个:

<aside class="container-fluid" role="complementary">
  <div class="modal-container ">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <h2>Name</h2>
        <ul class="menu">
          <li>Jack</li>
          <li>John</li>
          <li>James</li>
        </ul>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <h2>Surname</h2>
        <ul class="menu">
          <li>Sales</li>
          <li>Admin</li>
          <li>Sales</li>
        </ul>
      </div>

      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <h2>Action</h2>
        <a href="#" class="button">Connect</a>
        <a href="#" class="button">Connect</a>
        <a href="#" class="button">Connect</a>
      </div>
    </div>
    <table>
      <tr>
        <td>Jack</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>
      <tr>
        <td>John</td>
        <td>Admin</td>
      </tr>

      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>

      <tr>
        <td>James</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>
    </table>
  </div>
</aside>

实现这些布局最明智的方法是什么？(是不是应该table结合flex？用BS grid可以吗？)

Answer 1

概念

制作<tr>在较小的屏幕

上放入 flexbox

@media (max-width: 575.98px) {
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

看起来像

总计

body {
  margin: 0;
}

header {
  background: #00ADEE;
  color: white;
  height: 110px;
}

header h1 {
  padding: 0.5rem;
  margin: 0;
}

.my-table {
  width: 50%;
  margin-top: -50px;
  margin-left: auto;
  margin-right: auto;
  background: white;
  text-align: center;
  border-collapse: separate;
  border-spacing: 3rem 1.5rem;
  border: 2px solid #E7E7E7;
}

.my-table th,
.my-table td {
  padding: 0.5rem;
}

.my-table tr>td:last-child>a {
  text-decoration: none;
  display: block;
  color: black;
  padding: 0.5rem;
  background: #E7E7E7;
}

@media (max-width: 575.98px) {
  header h1 {
    text-align: center
  }
  .my-table {
    border-spacing: 1.5rem;
  }
  .my-table thead {
    display: none;
  }
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

<header>
  <h1>Table Test</h1>
</header>
<table class="my-table">
  <thead>
    <th>Name</th>
    <th>Surname</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr>
      <td>Jack</td>
      <td>Sales</td>
      <td><a href="">Connect</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Admin</td>
      <td><a href="">Connect</a></td>
    </tr>
    <tr>
      <td>James</td>
      <td>Sales</td>
      <td><a href="">Connect</a></td>
    </tr>
  </tbody>
</table>

(根据您的需要更改值。)

---

使用 Bootstrap 3

中心表 offset .使用与上述相同的概念。

body {
  margin: 0;
}

header {
  background: #00ADEE;
  color: white;
  height: 110px;
}

header h1 {
  padding: 0.5rem;
  margin: 0;
}

.my-table {
  margin-top: -50px !important;
  text-align: center;
  background: white;
}

.my-table * {
  border: none !important;
}

.my-table th {
  text-align: center;
}

.my-table tr>td:last-child>a {
  text-decoration: none;
  display: block;
  color: black;
  background: #E7E7E7;
}

@media (max-width: 575.98px) {
  header h1 {
    text-align: center
  }
  .my-table thead {
    display: none;
  }
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <h1>Table Test</h1>
</header>
<div class="row">
  <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3">
    <table class="my-table table">
      <thead>
        <th>Name</th>
        <th>Surname</th>
        <th>Action</th>
      </thead>
      <tbody>
        <tr>
          <td>Jack</td>
          <td>Sales</td>
          <td><a href="">Connect</a></td>
        </tr>
        <tr>
          <td>John</td>
          <td>Admin</td>
          <td><a href="">Connect</a></td>
        </tr>
        <tr>
          <td>James</td>
          <td>Sales</td>
          <td><a href="">Connect</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>