通过 PHP 包含加载的标头和 jQuery 加载与主文件的 CSS 重叠答案

【问题标题】：Loaded header via PHP include and jQuery load overlaps the CSS for the main file通过 PHP 包含加载的标头和 jQuery 加载与主文件的 CSS 重叠
【发布时间】：2021-12-16 15:16:27
【问题描述】：

我需要一些帮助。我正在做一个项目，我目前被困在这部分。我决定为我的文件创建一个单独的标题。标题和主页都将其 css 嵌入其标签中。我以前做过这个，但我没有遇到同样的问题。问题是，每当我尝试嵌入标头时，无论是使用 jQuery 的加载函数还是使用 PHP 包含，出于某种原因，header.html 的 CSS 都是被读取的。好像主页的 CSS 甚至都不存在。我还尝试将 CSS 放在两个文件上的单独 CSS 文件中，但没有做任何事情。

例如，如果我使用 jQuery 加载它们，如果我取消注释背景：标题上的橙色，那将是主页将遵循的内容。

这是标题。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="header.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
    body {
      margin: 0;
      padding: 0;
      /* background: orange; */
    }
    
    .header-body {
      font-family: 'Roboto', sans-serif;
      background: black;
      color: white;
      padding: .5em 1em;
    }
    
    #search-field {
      width: 70%;
      border-radius: 1em;
      font-size: 1.2rem;
      text-align: center;
      outline: none;
    }
    
    #search-button {
      outline: none;
      border: none;
      background: transparent;
      color: black;
      padding: .2em .6em;
      transform: translate(-3em, -.125em);
    }
    
    #menu-button-container {
      display: flex;
      justify-content: end;
      align-items: center;
    }
    
    #menu-button {
      font-size: 2.3rem;
      cursor: pointer;
    }
    
    .header-body h1 {
      font-size: 1.3rem;
      padding: .5em 0 0 0;
    }
    
    .header-body h1 span {
      color: #4DBAE6;
    }
    
    .side-bar {
      background: #C4C4C4;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 12em;
      z-index: -1;
      display: none;
    }
    
    ul {
      padding: 8em 0 0 0;
      list-style: none;
      text-indent: 2em;
    }
    
    li {
      background: #A4A4A4;
      margin: .3em 0;
      display: flex;
      align-items: center;
    }
    
    li:hover {
      cursor: pointer;
    }
    
    li:hover .vert {
      background: white;
    }
    
    .vert {
      padding: 1.3em 0;
      height: auto;
      width: .3em;
      background: #4DBAE6;
    }
    
    hr {
      width: 80%;
      border: 1px solid #4DBAE6;
      background: #4DBAE6;
    }
    
    .sidebar-buttons {
      font-size: 1rem;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .sidebar-buttons button {
      width: 5em;
      border-radius: 1em;
      outline: none;
      border: 3px solid #4DBAE6;
      margin: .5em;
      color: white;
      background: #4DBAE6;
    }
    
    #sign-up-button {
      background: white;
      color: black;
      border: 3px solid white;
    }
    
    @media(min-width: 1024px) {
      #menu-button {
        display: none;
      }
      .side-bar {
        display: block;
        background: none;
        width: auto;
        display: flex;
        z-index: 0;
        height: auto;
        font-size: 1.3rem;
        top: .8em;
        padding: .5em 1em 0 0;
      }
      .header-body h1 {
        font-size: 2rem;
      }
      #search-field {
        width: 90%;
        margin-top: .5em;
      }
      form {
        position: relative;
      }
      #search-button {
        top: .9em;
        right: 0;
        position: absolute;
      }
      ul {
        padding: 0;
        display: flex;
        text-indent: 0;
        width: auto;
      }
      li {
        background: none;
        color: white;
        margin: 0;
        margin: 0 .6em;
      }
      .vert {
        display: none;
      }
      hr {
        display: none;
      }
      .sidebar-buttons {
        flex-direction: row;
        transform: translateY(-.3em);
        margin: 0 0 0 1em;
      }
      .sidebar-buttons button {
        margin: .1em;
        border-radius: .5em;
      }
    }
    
    @media(min-width: 1920px) {
      .header-body h1 {
        font-size: 2.5rem;
      }
      #search-button {
        right: 0;
        font-size: 1.3rem;
      }
      #search-field {
        font-size: 1.8rem;
      }
      ul {
        font-size: 1.8rem;
      }
      .sidebar-buttons button {
        font-size: 1.3rem;
        transform: translateY(-.3em);
      }
    }
  </style>
</head>

<body>

  <div class="header-body">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4">
        <form action="#">
          <input type="text" name="search-field" id="search-field">
          <button type="submit" id="search-button"><i class="fa fa-search"></i></button>
        </form>
      </div>
      <div class="col-8 col-sm-4 order-sm-first col-md">
        <h1>FORMAL<span>-ine</span></h1>
      </div>
      <div class="col-4 col-sm-2 order-sm-last col-md-5" id="menu-button-container">
        <span class="material-icons" id="menu-button">
                    menu
                </span>
      </div>
    </div>
  </div>
  <div class="side-bar">
    <ul>
      <li>
        <div class="vert"></div>Home</li>
      <li>
        <div class="vert"></div>About Us</li>
      <li>
        <div class="vert"></div>FAQs</li>
    </ul>
    <hr>
    <div class="sidebar-buttons">
      <button>Log In</button>
      <button id="sign-up-button">Sign Up</button>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $("#menu-button").click(function() {
        $(".side-bar").animate({
          width: 'toggle'
        }, 350);
      });
    })
  </script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

这里是主页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FORMAL-ine</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        body{
            background: #171717;
            color: white;
        }
        .carousel-item {
            height: 50%;
            min-height: 300px;
            background: no-repeat scroll center scroll;
            -webkit-background-size: cover;
            background-size: cover;
        }
        
        .container-fluid div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .row{
            margin: 2em 0;
        }
        .row div{
            margin: .5em 0;
            overflow: hidden;
        }
        .container-fluid img{
            height: 250px;
            width: 350px;
            background: black;
        }
        .shopping-button{
            margin: .5em auto;
            background: #4DBAE6;
            outline: none;
            border: 1px solid #4DBAE6;
            border-radius: 1em;
            display: flex;
            padding: .5em 1.5em;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .shopping-button span{
            color: black;
        }
        .container-fluid p{
            text-align: justify;
            text-indent: 2em;
        }
        .container-fluid h4{
            margin: .2em 0;
        }
        
        @media(min-width: 768px){
            .container-fluid div{
                display: flex;
                flex-direction: row;
            }
            .container-fluid .content{
                display: block;
                text-align: center;
            }
        }
        @media(min-width: 1024px){
            body{
                padding: .5em 5em;
            }
            .container-fluid{
                margin: 3em 0;
            }
            .container-fluid img{
                height: 350px;
                width: 400px;
            }
            #mainpage-carousel{
                width: 80vw;
                margin: 2em auto;
            }
            .content{
                width: 75%;
            }
            .row{
                margin: -1em 1em;
            }
        }
        @media(min-width: 1920px){
            .container-fluid{
                padding: 4em 11em;
                margin: 0 0 6em 0;
            }
            .container-fluid img{
                height: 650px;
                width: 800px;
            }
            .content h4{
                font-size: 2rem;
            }
            .content p{
                font-size: 1.5rem;
            }
            .row{
                margin: -1em 0;
            }
            .shopping-button{
                padding: 1em 3em;
                font-size: 1.3rem;
                font-weight: 500;
            }
        }
    </style>
</head>
<body>
    <script>
      $(function(){
          $("#header").load("includes/header.html"); 
      });
    </script>
    <div id="mainpage-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="Third slide">
            </div>
        </div>
    </div>
    <button class="shopping-button">
        <span class="material-icons">
            local_offer
        </span>
        Shop Now
    </button>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 order-1 col-md-6">
                <img src="#" alt="">
            </div>
            <div class="col-12 order-2 col-md-6">
                <div class="content">
                    <h4>Luxury</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-2 col-md-6 order-md-1">
                <div class="content">
                    <h4>Delicacy</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
            <div class="col-12 order-1 col-md-6 order-md-2">
                <img src="#" alt="">
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-1 col-md-6">
                <img src="#" alt="">
            </div>
            <div class="col-12 order-2 col-md-6">
                <div class="content">
                    <h4>Simplicity</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-2 col-md-6 order-md-1">
                <div class="content">
                    <h4>Pure</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
            <div class="col-12 order-1 col-md-6 order-md-2">
                <img src="#" alt="">
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

非常感谢任何帮助，我以前做过，但从未遇到过这个问题。

【问题讨论】：

常规文档只能有一个 HTML,head,body 部分 - 如果标题在 iframe 中，则不同，但显示的标题不应包含 doctype 声明、head、title、body -只是相关的 HTML、css 和脚本。为此，可以有效地将完整文档加载到现有文档正文中
标头是另一个html文件，而不仅仅是一个标头标签。对不起，这是我理解的
在父页面中包含部分文件当然是常见的做法（例如带有脚本等的头部部分或部分 html），但您需要记住您包含的内容将成为一部分当前加载的文档，因此您不会在其中包含出现在父文档其他地方的内容。关于 style 标签是否可以包含在文档的 body 部分中存在很多争论，因此对于上面的标记，您可能希望使用包含提供所有 CSS 和 Javascript 的包含以及另一个提供特定部分的包含HTML

标签： php html jquery css jquery-load

【解决方案1】：

header.html

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
    body {
      margin: 0;
      padding: 0;
      /* background: orange; */
    }
    
    .header-body {
      font-family: 'Roboto', sans-serif;
      background: black;
      color: white;
      padding: .5em 1em;
    }
    
    #search-field {
      width: 70%;
      border-radius: 1em;
      font-size: 1.2rem;
      text-align: center;
      outline: none;
    }
    
    #search-button {
      outline: none;
      border: none;
      background: transparent;
      color: black;
      padding: .2em .6em;
      transform: translate(-3em, -.125em);
    }
    
    #menu-button-container {
      display: flex;
      justify-content: end;
      align-items: center;
    }
    
    #menu-button {
      font-size: 2.3rem;
      cursor: pointer;
    }
    
    .header-body h1 {
      font-size: 1.3rem;
      padding: .5em 0 0 0;
    }
    
    .header-body h1 span {
      color: #4DBAE6;
    }
    
    .side-bar {
      background: #C4C4C4;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 12em;
      z-index: -1;
      display: none;
    }
    
    ul {
      padding: 8em 0 0 0;
      list-style: none;
      text-indent: 2em;
    }
    
    li {
      background: #A4A4A4;
      margin: .3em 0;
      display: flex;
      align-items: center;
    }
    
    li:hover {
      cursor: pointer;
    }
    
    li:hover .vert {
      background: white;
    }
    
    .vert {
      padding: 1.3em 0;
      height: auto;
      width: .3em;
      background: #4DBAE6;
    }
    
    hr {
      width: 80%;
      border: 1px solid #4DBAE6;
      background: #4DBAE6;
    }
    
    .sidebar-buttons {
      font-size: 1rem;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .sidebar-buttons button {
      width: 5em;
      border-radius: 1em;
      outline: none;
      border: 3px solid #4DBAE6;
      margin: .5em;
      color: white;
      background: #4DBAE6;
    }
    
    #sign-up-button {
      background: white;
      color: black;
      border: 3px solid white;
    }
    
    @media(min-width: 1024px) {
      #menu-button {
        display: none;
      }
      .side-bar {
        display: block;
        background: none;
        width: auto;
        display: flex;
        z-index: 0;
        height: auto;
        font-size: 1.3rem;
        top: .8em;
        padding: .5em 1em 0 0;
      }
      .header-body h1 {
        font-size: 2rem;
      }
      #search-field {
        width: 90%;
        margin-top: .5em;
      }
      form {
        position: relative;
      }
      #search-button {
        top: .9em;
        right: 0;
        position: absolute;
      }
      ul {
        padding: 0;
        display: flex;
        text-indent: 0;
        width: auto;
      }
      li {
        background: none;
        color: white;
        margin: 0;
        margin: 0 .6em;
      }
      .vert {
        display: none;
      }
      hr {
        display: none;
      }
      .sidebar-buttons {
        flex-direction: row;
        transform: translateY(-.3em);
        margin: 0 0 0 1em;
      }
      .sidebar-buttons button {
        margin: .1em;
        border-radius: .5em;
      }
    }
    
    @media(min-width: 1920px) {
      .header-body h1 {
        font-size: 2.5rem;
      }
      #search-button {
        right: 0;
        font-size: 1.3rem;
      }
      #search-field {
        font-size: 1.8rem;
      }
      ul {
        font-size: 1.8rem;
      }
      .sidebar-buttons button {
        font-size: 1.3rem;
        transform: translateY(-.3em);
      }
    }
  </style>
</head>

<body>

  <div class="header-body">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4">
        <form action="#">
          <input type="text" name="search-field" id="search-field">
          <button type="submit" id="search-button"><i class="fa fa-search"></i></button>
        </form>
      </div>
      <div class="col-8 col-sm-4 order-sm-first col-md">
        <h1>FORMAL<span>-ine</span></h1>
      </div>
      <div class="col-4 col-sm-2 order-sm-last col-md-5" id="menu-button-container">
        <span class="material-icons" id="menu-button">
                    menu
                </span>
      </div>
    </div>
  </div>
  <div class="side-bar">
    <ul>
      <li>
        <div class="vert"></div>Home</li>
      <li>
        <div class="vert"></div>About Us</li>
      <li>
        <div class="vert"></div>FAQs</li>
    </ul>
    <hr>
    <div class="sidebar-buttons">
      <button>Log In</button>
      <button id="sign-up-button">Sign Up</button>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $("#menu-button").click(function() {
        $(".side-bar").animate({
          width: 'toggle'
        }, 350);
      });
    })
  </script>

主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FORMAL-ine</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        body{
            background: #171717;
            color: white;
        }
        .carousel-item {
            height: 50%;
            min-height: 300px;
            background: no-repeat scroll center scroll;
            -webkit-background-size: cover;
            background-size: cover;
        }
        
        .container-fluid div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .row{
            margin: 2em 0;
        }
        .row div{
            margin: .5em 0;
            overflow: hidden;
        }
        .container-fluid img{
            height: 250px;
            width: 350px;
            background: black;
        }
        .shopping-button{
            margin: .5em auto;
            background: #4DBAE6;
            outline: none;
            border: 1px solid #4DBAE6;
            border-radius: 1em;
            display: flex;
            padding: .5em 1.5em;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .shopping-button span{
            color: black;
        }
        .container-fluid p{
            text-align: justify;
            text-indent: 2em;
        }
        .container-fluid h4{
            margin: .2em 0;
        }
        
        @media(min-width: 768px){
            .container-fluid div{
                display: flex;
                flex-direction: row;
            }
            .container-fluid .content{
                display: block;
                text-align: center;
            }
        }
        @media(min-width: 1024px){
            body{
                padding: .5em 5em;
            }
            .container-fluid{
                margin: 3em 0;
            }
            .container-fluid img{
                height: 350px;
                width: 400px;
            }
            #mainpage-carousel{
                width: 80vw;
                margin: 2em auto;
            }
            .content{
                width: 75%;
            }
            .row{
                margin: -1em 1em;
            }
        }
        @media(min-width: 1920px){
            .container-fluid{
                padding: 4em 11em;
                margin: 0 0 6em 0;
            }
            .container-fluid img{
                height: 650px;
                width: 800px;
            }
            .content h4{
                font-size: 2rem;
            }
            .content p{
                font-size: 1.5rem;
            }
            .row{
                margin: -1em 0;
            }
            .shopping-button{
                padding: 1em 3em;
                font-size: 1.3rem;
                font-weight: 500;
            }
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <script>
      $(function(){
          $("#header").load("includes/header.html"); 
      });
    </script>
    <div id="mainpage-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/main page images/sample.jpg" alt="Third slide">
            </div>
        </div>
    </div>
    <button class="shopping-button">
        <span class="material-icons">
            local_offer
        </span>
        Shop Now
    </button>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 order-1 col-md-6">
                <img src="#" alt="">
            </div>
            <div class="col-12 order-2 col-md-6">
                <div class="content">
                    <h4>Luxury</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-2 col-md-6 order-md-1">
                <div class="content">
                    <h4>Delicacy</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
            <div class="col-12 order-1 col-md-6 order-md-2">
                <img src="#" alt="">
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-1 col-md-6">
                <img src="#" alt="">
            </div>
            <div class="col-12 order-2 col-md-6">
                <div class="content">
                    <h4>Simplicity</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 order-2 col-md-6 order-md-1">
                <div class="content">
                    <h4>Pure</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
                </div>
            </div>
            <div class="col-12 order-1 col-md-6 order-md-2">
                <img src="#" alt="">
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：