Question

在您进入我的问题部分之前。您能否运行我的代码段并查看结果。
运行我的代码后，请点击“展开代码段”，然后查看结果。

-我的问题是：

我需要合并第二个框一和第二个框二。由于两者都是不同的行，我不知道怎么做

       <!DOCTYPE html>
       <html lang="en">
         <head>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <meta http-equiv="X-UA-Compatible" content="ie=edge" />
           <title>Document</title>
           <link
             rel="stylesheet"
             href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
             integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
             crossorigin="anonymous"
           />
         </head>
         <body>
           <header>
             <div class="container">
               <div class="row" style="border:1px solid #333; height: 250px;">
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is first box.
                 </div>
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is second box - 1.
                 </div>
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is third box.
                 </div>
               </div>
               <span> </span>
               <div class="row" style="border:1px solid #333; height: 200px;">
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is fourth box.
                 </div>
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is second box - 2.
                 </div>
                 <div class="col-md-4" style="border:1px dotted #333">
                   This is fifth box.
                 </div>
               </div>
               <div class="row" style="border:1px solid #333; height: 200px;">
                 <div class="col-md-6" style="border:1px dotted #333">
                   This is sixth box.
                 </div>
                 <div class="col-md-6" style="border:1px dotted #333">
                   This is seventh box.
                 </div>
               </div>
             </div>
           </header>
         </body>
       </html>

Answer 1

我以不同的方式做到了。您可以运行并在扩展屏幕中查看结果。当涉及到小屏幕布局时会中断。如果有人知道该怎么做，请帮助我？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <header>
      <div class="container-fluid">
        <div class="row" style="height: 400px;">
          <div class="col">
            <div
              class="mt-2 mb-2"
              style="border:1px dotted #333; height: 200px;"
            >
              widget one
            </div>
            <div class="mb-2" style="border:1px dotted #333; height: 180px;">
              widget two
            </div>
          </div>
          <div class="mt-2 mb-2 col-md-6" style="border:1px dotted #333">
            Widget three
          </div>
          <div class="col">
            <div
              class="mt-2 mb-2"
              style="border:1px dotted #333; height: 200px;"
            >
              widget four
            </div>
            <div class="mb-2" style="border:1px dotted #333; height: 180px;">
              widget five
            </div>
          </div>
        </div>
        <div class="row" style="height: 300px;">
          <div
            class="ml-3 mt-2 mr-2 mb-2 col-md-6"
            style="border:1px dotted #333"
          >
            Widget - 6
          </div>
          <div class="mr-3 mt-2 mb-2 col" style="border:1px dotted #333">
            Widget - 7
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

如何划分页面以创建小部件？

1 个答案: