Question

如何在Web视图和移动视图中创建5列2行的网格布局应将其更改为5行2列

<div class="container">
    <div class="row">
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
    </div>
</div>

实际上'col'在行内采用自动宽度，但我需要限制1行中的5列，并且col-sm-6具有min-with：567，以便在Web视图中也覆盖相同的布局。.

Answer 1

    <div class="row">
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
    </div>

这是上面的css

<style>
  .col-5{width: 20%;padding-left: 15px;padding-right: 15px;box-sizing: border-box;}
  @media only screen 
  and (max-width : 480px) {
    .col-half{width: 50%;}
  }
</style>

网格布局Web视图-2行5列，在Mobile View中5行2列

1 个答案: