Question

在我的新项目中，我同时使用了bootstrap和CSS，并使用div基本结构制作了响应表。我正在尝试制作表格的示例，但是我的页面如下图所示：我正在尝试将图像结构放在下面：

问题仅存在于1x3元组中。 `

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="table" style="border:1px solid black;">
   <div class="row">
       <div class="col-md-6">1</div>
       <div class="col-md-6">2</div>
   </div>
   <div class="row">
       <div class="col-md-4">1</div>
       <div class="col-md-4">2</div>
       <div class="col-md-4">3</div>
   </div>
   <div class="row">
       <div class="col-md-4">1</div>
       <div class="col-md-4">2</div>
       <div class="col-md-4">3</div>
   </div>
</div>

`

Answer 1

如果我理解您的问题，则最高值应为col-md-4和col-md-8，而不是6和6：

<div class=" table " style="border:1px solid black;">
    <div class="row ">
         <div class="col-md-4">
             1
         </div>
         <div class="col-md-8">
            2
         </div>
    </div>
    <div class="row ">
        <div class="col-md-4">
            1
        </div>
        <div class="col-md-4">
            2
        </div>
        <div class="col-md-4">
            3
        </div>
    </div>
    <div class="row ">
            <div class="col-md-4">
                1
            </div>
            <div class="col-md-4">
                2
            </div>
            <div class="col-md-4">
                3
            </div>
        </div>
</div>

Answer 2

使用您的代码，我纠正了您的代码。将第一个col-md-6更改为col-md-4，然后将第二个col-md-6更改为col-md-8。如果在此之后您不理解，请使用我的代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
 div{
    border: 1px solid black;
  }
  </style>

<div class=" table table-bordered"  >
    <div class="row " >
         <div class="col-md-4">
             1
         </div>
         <div class="col-md-8">
            2
         </div>
    </div>
    <div class="row ">
        <div class="col-md-4">
            1
        </div>
        <div class="col-md-4">
            2
        </div>
        <div class="col-md-4">
            3
        </div>
    </div>
    <div class="row ">
            <div class="col-md-4">
                1
            </div>
            <div class="col-md-4">
                2
            </div>
            <div class="col-md-4">
                3
            </div>
        </div>
</div>

在设备的全屏模式下查看我的代码段。

Answer 3

尝试以下

mkdir("new_dir", 0755);

为我的自适应项目制作具有div基本结构的表格

3 个答案: