Bootstrap页面布局问题 – 容器未正确适应屏幕尺寸

huangapple
go评论148阅读模式
英文:

Bootstrap landing page layout issue - Container not fitting screen size properly

问题

I checked the container syntaxes, margin and padding, but everything seems fine. I suspect the issue might be related to the Bootstrap version you're using. You have mentioned "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" in your code, but as of my knowledge cutoff date in September 2021, Bootstrap 5.3.0 does not exist.

Please double-check the Bootstrap version you're using and make sure it's the correct version. Additionally, ensure that your HTML structure and CSS styles are correctly set up to achieve the desired layout. If you have any specific questions or need further assistance, please let me know.

英文:

I'm currently working on creating a landing page using Bootstrap for practice. However, I'm facing an issue with the layout where the container doesn't fit the appropriate screen size. The right and left sides are unbalanced, causing the screen to lean towards the left side.

Here's a screenshot (link) illustrating the problem: text

I've tried various approaches, but haven't been able to resolve the issue. I suspect it could be a problem with the grid system or container settings in Bootstrap.

Could someone please guide me on how to troubleshoot and fix this layout problem? Any suggestions or insights would be greatly appreciated.

Additionally, here are some relevant code snippets:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinDog</title>
<link href="./css/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<!-- Title -->
<section id="title" class="gradient-background">
<div class="container col-xxl-8 pt-5">
<div class="row flex-lg-row-reverse align-items-center">
<div class="col-12 col-sm-8 col-lg-6">
<img src="./images/iphone.png" class="header-img d-block mx-auto img-fluid" alt="Dog on a smartphone" height="200" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3 pt-5 pb-3">Meet new and interesting dogs nearby.</h1>
<div class="d-grid gap-2 d-md-flex justify-content-md-start pb-5">
<button type="button" class="btn btn-light btn-lg px-4 me-md-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16">
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"/>
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"/>
</svg>
Download
</button>
<button type="button" class="btn btn-outline-light btn-lg px-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google-play mb-1" viewBox="0 0 16 16">
<path d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z"/>
</svg>
Download
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3 px-4">
<div class="col d-flex align-items-start py-4">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle"
viewBox="0 0 16 16">
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
</svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
</div>
</div>
<div class="col d-flex align-items-start py-4">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16">
<path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"/>
<path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z"/>
</svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
</div>
</div>
<div class="col d-flex align-items-start py-4">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-arrow-through-heart"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z" />
</svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section id="testimonial">
<div class="mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5 d-flex flex-column align-items-center">
<h2 class="fs-2 text-center pt-4">"I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof."</h2>
<img class="profile-img mt-5" src="./images/dog-img.jpg" alt="dog image">
<p class="mt-2 mx-auto">Pebbles, New York</p>
<div class="container pt-5">
<div class="row">
<div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center">
<img src="./images/techcrunch.png" alt="TechCrunch" height="30">
</div>
<div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center">
<img src="./images/mashable.png" alt="Mashable" height="30">
</div>
<div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center">
<img src="./images/bizinsider.png" alt="Business Insider" height="40">
</div>
<div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center">
<img src="./images/tnw.png" alt="TNW" height="38">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing">
<div class="container py-3">
<header>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h2 class="display-4 fw-normal text-body-emphasis">A Plan for Every Dog's Needs</h2>
<p class="fs-5 text-body-secondary">Simple and affordable price plans for you and your dog.</p>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">Chihuahua</h3>
</div>
<div class="card-body">
<p class="card-title pricing-card-title fs-1">$0<small class="text-body-secondary fw-light">/mo</small></p>
<ul class="list-unstyled mt-3 mb-4">
<li>5 Matches Per Day</li>
<li>10 Messages Per Day</li>
<li>Unlimited App Usage</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">Labrador</h3>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Unlimited Matches</li>
<li>Unlimited Messages</li>
<li>Unlimited App Usage</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-bg-dark border-primary">
<h3 class="my-0 fw-normal">Mastiff</h3>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Pirority Listing</li>
<li>Unlimited Matches & Messages</li>
<li>Unlimited App Usage</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-dark">Contact us</button>
</div>
</div>
</div>
</div>
</main>
</div>
</section>
<!-- Footer -->
<section id="footer" class="gradient-background">
<div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-2 pt-4">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<p class="text-body-secondary">© TinDog</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

I checked the container syntaxes, margin and padding too. But I can't really figure out what's the problem about it..

I would really appreciate your help and it will help me a lot as a novice..

Thanks in advance!!

答案1

得分: 0

检查容器的放置位置。在代码片段中，您正在使用container类与col-xxl-8类。确保容器包围了您想要居中的整个内容，并且正确应用了col-xxl-8类。

并且我认为您应该检查特性部分的所有容器类，例如对于图像容器使用col-12 col-sm-8 col-lg-6，对于文本容器使用col-lg-6。

英文:

Check the placement of your container. In the code snippet, you're using the container class with the col-xxl-8 class. Ensure that the container is wrapping the entire content you want to center, and the col-xxl-8 class is applied correctly.

and think you should check all container classes of feature section as like

col-12 col-sm-8 col-lg-6 for the image container and col-lg-6 for the text container.

答案2

得分: 0

水平滚动条出现是因为Features部分的内容超出了body的宽度超过了100%。添加Bootstrap类mw-100，相当于在CSS中设置max-width: 100%;。

请参考下面的代码片段。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TinDog</title>
  <link href="./css/style.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>

  <!-- Title -->
  <section id="title" class="gradient-background">

    <div class="container col-xxl-8 pt-5">
      <div class="row flex-lg-row-reverse align-items-center">

        <div class="col-12 col-sm-8 col-lg-6">
          <img src="./images/iphone.png" class="header-img d-block mx-auto img-fluid" alt="Dog on a smartphone" height="200" loading="lazy">
        </div>

        <div class="col-lg-6">
          <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3 pt-5 pb-3">Meet new and interesting dogs nearby.</h1>

          <div class="d-grid gap-2 d-md-flex justify-content-md-start pb-5">

            <button type="button" class="btn btn-light btn-lg px-4 me-md-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16">
                <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
                <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1

<details>
<summary>英文:</summary>

The horizontal scrollbar appeared because the&#160;*Features* section overflowed the body by more than 100%. Add Bootstrap class `mw-100`, equivalent to setting `max-width: 100%;` in CSS.

See the snippet below.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;

    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;TinDog&lt;/title&gt;
      &lt;link href=&quot;./css/style.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;

      &lt;!-- Title --&gt;
      &lt;section id=&quot;title&quot; class=&quot;gradient-background&quot;&gt;

        &lt;div class=&quot;container col-xxl-8 pt-5&quot;&gt;
          &lt;div class=&quot;row flex-lg-row-reverse align-items-center&quot;&gt;

            &lt;div class=&quot;col-12 col-sm-8 col-lg-6&quot;&gt;
              &lt;img src=&quot;./images/iphone.png&quot; class=&quot;header-img d-block mx-auto img-fluid&quot; alt=&quot;Dog on a smartphone&quot; height=&quot;200&quot; loading=&quot;lazy&quot;&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col-lg-6&quot;&gt;
              &lt;h1 class=&quot;display-5 fw-bold text-body-emphasis lh-1 mb-3 pt-5 pb-3&quot;&gt;Meet new and interesting dogs nearby.&lt;/h1&gt;

              &lt;div class=&quot;d-grid gap-2 d-md-flex justify-content-md-start pb-5&quot;&gt;

                &lt;button type=&quot;button&quot; class=&quot;btn btn-light btn-lg px-4 me-md-2&quot;&gt;
                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-apple mb-1&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                      &lt;path d=&quot;M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z&quot; /&gt;
                      &lt;path d=&quot;M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z&quot; /&gt;
                    &lt;/svg&gt;
                    Download
                  &lt;/button&gt;

                &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light btn-lg px-4&quot;&gt;
                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-google-play mb-1&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                      &lt;path d=&quot;M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z&quot; /&gt;
                    &lt;/svg&gt;
                    Download
                  &lt;/button&gt;

              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
        &lt;/div&gt;

      &lt;/section&gt;

      &lt;!-- Features --&gt;
      &lt;section id=&quot;features&quot;&gt;
        &lt;div class=&quot;row g-4 py-5 row-cols-1 row-cols-lg-3 px-4 mw-100&quot;&gt;

          &lt;div class=&quot;col d-flex align-items-start py-4&quot;&gt;
            &lt;div class=&quot;icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3&quot;&gt;
              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;30&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-check2-circle&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                  &lt;path d=&quot;M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z&quot; /&gt;
                  &lt;path d=&quot;M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-2 text-body-emphasis&quot;&gt;Featured title&lt;/h3&gt;
              &lt;p&gt;Paragraph of text beneath the heading to explain the heading. We&#39;ll add onto it with another sentence and probably just keep going until we run out of words.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class=&quot;col d-flex align-items-start py-4&quot;&gt;
            &lt;div class=&quot;icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3&quot;&gt;
              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;30&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-mortarboard&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                  &lt;path d=&quot;M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z&quot; /&gt;
                  &lt;path d=&quot;M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-2 text-body-emphasis&quot;&gt;Featured title&lt;/h3&gt;
              &lt;p&gt;Paragraph of text beneath the heading to explain the heading. We&#39;ll add onto it with another sentence and probably just keep going until we run out of words.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class=&quot;col d-flex align-items-start py-4&quot;&gt;
            &lt;div class=&quot;icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3&quot;&gt;
              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;30&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-arrow-through-heart&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-2 text-body-emphasis&quot;&gt;Featured title&lt;/h3&gt;
              &lt;p&gt;Paragraph of text beneath the heading to explain the heading. We&#39;ll add onto it with another sentence and probably just keep going until we run out of words.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;

      &lt;!-- Testimonial --&gt;
      &lt;section id=&quot;testimonial&quot;&gt;
        &lt;div class=&quot;mb-4 bg-body-tertiary rounded-3&quot;&gt;
          &lt;div class=&quot;container-fluid py-5 d-flex flex-column align-items-center&quot;&gt;
            &lt;h2 class=&quot;fs-2 text-center pt-4&quot;&gt;&quot;I no longer have to sniff other dogs for love. I&#39;ve found the hottest Corgi on TinDog. Woof.&quot;&lt;/h2&gt;
            &lt;img class=&quot;profile-img mt-5&quot; src=&quot;./images/dog-img.jpg&quot; alt=&quot;dog image&quot;&gt;
            &lt;p class=&quot;mt-2 mx-auto&quot;&gt;Pebbles, New York&lt;/p&gt;

            &lt;div class=&quot;container pt-5&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-lg-3 col-sm-12 d-flex flex-column align-items-center&quot;&gt;
                  &lt;img src=&quot;./images/techcrunch.png&quot; alt=&quot;TechCrunch&quot; height=&quot;30&quot;&gt;
                &lt;/div&gt;

                &lt;div class=&quot;col-lg-3 col-sm-12 d-flex flex-column align-items-center&quot;&gt;
                  &lt;img src=&quot;./images/mashable.png&quot; alt=&quot;Mashable&quot; height=&quot;30&quot;&gt;
                &lt;/div&gt;

                &lt;div class=&quot;col-lg-3 col-sm-12 d-flex flex-column align-items-center&quot;&gt;
                  &lt;img src=&quot;./images/bizinsider.png&quot; alt=&quot;Business Insider&quot; height=&quot;40&quot;&gt;
                &lt;/div&gt;

                &lt;div class=&quot;col-lg-3 col-sm-12 d-flex flex-column align-items-center&quot;&gt;
                  &lt;img src=&quot;./images/tnw.png&quot; alt=&quot;TNW&quot; height=&quot;38&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;

      &lt;!-- Pricing --&gt;
      &lt;section id=&quot;pricing&quot;&gt;
        &lt;div class=&quot;container py-3&quot;&gt;
          &lt;header&gt;
            &lt;div class=&quot;pricing-header p-3 pb-md-4 mx-auto text-center&quot;&gt;
              &lt;h2 class=&quot;display-4 fw-normal text-body-emphasis&quot;&gt;A Plan for Every Dog&#39;s Needs&lt;/h2&gt;
              &lt;p class=&quot;fs-5 text-body-secondary&quot;&gt;Simple and affordable price plans for you and your dog.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/header&gt;

          &lt;main&gt;
            &lt;div class=&quot;row row-cols-1 row-cols-md-3 mb-3 text-center&quot;&gt;

              &lt;div class=&quot;col&quot;&gt;
                &lt;div class=&quot;card mb-4 rounded-3 shadow-sm&quot;&gt;
                  &lt;div class=&quot;card-header py-3&quot;&gt;
                    &lt;h3 class=&quot;my-0 fw-normal&quot;&gt;Chihuahua&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                    &lt;p class=&quot;card-title pricing-card-title fs-1&quot;&gt;$0&lt;small class=&quot;text-body-secondary fw-light&quot;&gt;/mo&lt;/small&gt;&lt;/p&gt;
                    &lt;ul class=&quot;list-unstyled mt-3 mb-4&quot;&gt;
                      &lt;li&gt;5 Matches Per Day&lt;/li&gt;
                      &lt;li&gt;10 Messages Per Day&lt;/li&gt;
                      &lt;li&gt;Unlimited App Usage&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;button type=&quot;button&quot; class=&quot;w-100 btn btn-lg btn-outline-primary&quot;&gt;Sign up for free&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class=&quot;col&quot;&gt;
                &lt;div class=&quot;card mb-4 rounded-3 shadow-sm&quot;&gt;
                  &lt;div class=&quot;card-header py-3&quot;&gt;
                    &lt;h3 class=&quot;my-0 fw-normal&quot;&gt;Labrador&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h1 class=&quot;card-title pricing-card-title&quot;&gt;$15&lt;small class=&quot;text-body-secondary fw-light&quot;&gt;/mo&lt;/small&gt;&lt;/h1&gt;
                    &lt;ul class=&quot;list-unstyled mt-3 mb-4&quot;&gt;
                      &lt;li&gt;Unlimited Matches&lt;/li&gt;
                      &lt;li&gt;Unlimited Messages&lt;/li&gt;
                      &lt;li&gt;Unlimited App Usage&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;button type=&quot;button&quot; class=&quot;w-100 btn btn-lg btn-dark&quot;&gt;Get started&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class=&quot;col&quot;&gt;
                &lt;div class=&quot;card mb-4 rounded-3 shadow-sm border-primary&quot;&gt;
                  &lt;div class=&quot;card-header py-3 text-bg-dark border-primary&quot;&gt;
                    &lt;h3 class=&quot;my-0 fw-normal&quot;&gt;Mastiff&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h1 class=&quot;card-title pricing-card-title&quot;&gt;$29&lt;small class=&quot;text-body-secondary fw-light&quot;&gt;/mo&lt;/small&gt;&lt;/h1&gt;
                    &lt;ul class=&quot;list-unstyled mt-3 mb-4&quot;&gt;
                      &lt;li&gt;Pirority Listing&lt;/li&gt;
                      &lt;li&gt;Unlimited Matches &amp; Messages&lt;/li&gt;
                      &lt;li&gt;Unlimited App Usage&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;button type=&quot;button&quot; class=&quot;w-100 btn btn-lg btn-dark&quot;&gt;Contact us&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/section&gt;

      &lt;!-- Footer --&gt;
      &lt;section id=&quot;footer&quot; class=&quot;gradient-background&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;footer class=&quot;row row-cols-1 row-cols-sm-2 row-cols-md-5 py-2 pt-4&quot;&gt;

            &lt;div class=&quot;col mb-3&quot;&gt;
              &lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center mb-3 link-body-emphasis text-decoration-none&quot;&gt;
                &lt;svg class=&quot;bi me-2&quot; width=&quot;40&quot; height=&quot;32&quot;&gt;
                    &lt;use xlink:href=&quot;#bootstrap&quot;&gt;&lt;/use&gt;
                  &lt;/svg&gt;
              &lt;/a&gt;
              &lt;p class=&quot;text-body-secondary&quot;&gt;&#169; TinDog&lt;/p&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col mb-3&quot;&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col mb-3&quot;&gt;
              &lt;h5&gt;Section&lt;/h5&gt;
              &lt;ul class=&quot;nav flex-column&quot;&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col mb-3&quot;&gt;
              &lt;h5&gt;Section&lt;/h5&gt;
              &lt;ul class=&quot;nav flex-column&quot;&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col mb-3&quot;&gt;
              &lt;h5&gt;Section&lt;/h5&gt;
              &lt;ul class=&quot;nav flex-column&quot;&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;nav-item mb-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link p-0 text-body-secondary&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/footer&gt;
        &lt;/div&gt;

      &lt;/section&gt;

      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

</details>

huangapple
  • 本文由 发表于 2023年6月27日 19:49:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76564552.html
  • bootstrap-5
  • containers
  • frontend
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定