文章/答案/技术大牛

发布

社区首页 >问答首页 >bootstrap 5网格布局col-md-6不能正常工作

问bootstrap 5网格布局col-md-6不能正常工作
EN

Stack Overflow用户

提问于 2021-02-20 00:06:24

回答 1查看 916关注 0票数 1

我想要在image-computer的下一行上显示feature-list div，但只有在宽度为768px时，它不会出现在下一行上。为了更好地理解，我附上了预期结果的截图和实际结果的照片以供参考。请给我一个更好的解决方案。

  body {
      background-image: url("images/bg-header-desktop.png");
      background-size: contain;
      background-repeat: no-repeat;
      font-size: 18px;
      font-family: 'Bai Jamjuree', sans-serif;
      padding: 9% 0 0 0;
      line-height: 1.5;
      margin: 0;
    }

    p {
      color: hsl(201, 11%, 66%);
    }

    h1,
    h3,
    h5,
    h2 {
      color: hsl(210, 10%, 33%);
      font-weight: 600;
    }

    button {
      margin-top: 1.25rem;
    }

    .btn-ios {
      border: 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 100;
      padding: 10px 35px;
      background-color: #26BAA4;
      -webkit-box-shadow: -1px 7px 15px -3px #35D9BD;
      -moz-box-shadow: -1px 7px 15px -3px #35D9BD;
      box-shadow: -1px 7px 15px -3px #35D9BD;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      text-align: center;
    }

    .btn-ios:hover {
      background: #35D9BD;
      border: solid #35D9BD 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      text-decoration: none;
    }

    .btn-mac {
      border: 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 100;
      padding: 10px 35px;
      background-color: #6173FF;
      -webkit-box-shadow: -1px 7px 15px -3px #7585FC;
      -moz-box-shadow: -1px 7px 15px -3px #7585FC;
      box-shadow: -1px 7px 15px -3px #7585FC;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      text-align: center;
    }

    .btn-mac:hover {
      background: #7585FC;
      border: solid #7585FC 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      text-decoration: none;
    }

    .ios {
      text-align: right;
    }

    .mac {
      text-align: left;
    }

    .snippets {
      margin-top: 5rem;
    }

    footer {
      background-color: #f2f2f2;
      margin-top: 5rem;
      padding: 0 10%;
    }

    /* title */
    #title {
      text-align: center;
    }

    .para {
      padding: 1% 24%;
    }

    .logo {
      margin-bottom: 2.75rem;
    }

    /* features */

    #features {
      margin-top: 4rem;
    }

    .feature-list {
      padding-left: 1rem;
      padding-right: 17%;
    }

    .feature-list-div {

    }

    .center-feature {
      text-align: center;
    }

    .clipboard {
      margin-top: 8rem;
    }

    .image-computer {
      position: relative;
      right: 30px;
      width: 93%;
    }

    .image-devices {
      margin: 6rem auto 0 auto;
      display: block;
      width: 80%;
    }

    .feature-second {
      text-align: center;
      padding: 3% 10% 10% 10%;
    }

    .sponsers {
      text-align: center;
      padding: 0 10% 10% 10%;
    }

    /* cta */
    #cta {
      text-align: center;
    }

    /* footer */

    .footer-logo {
      width: 45%;
    }

    .footer-row {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .link {
      text-decoration: none;
      color: hsl(210, 10%, 33%);
    }

    .link:hover {
      color: hsl(171, 66%, 44%);
    }

    .first-footer {
      margin-bottom: 1.2rem;
      display: block;
    }

    .social-icon {
      text-align: right;
      padding-top: 2rem;
    }

    .fb-icon:hover,
    .twitter-icon:hover,
    .insta-icon:hover {
      color: hsl(171, 66%, 44%);
    }

    .fb-icon {
      margin-right: 1rem;
    }

    .twitter-icon {
      margin-right: 1rem;
    }

    .attribution {
      font-size: 11px;
      text-align: center;
      margin-bottom: 0;
      position: relative;
      bottom: 5px;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }

    @media (max-width: 970px) {
      .feature-list{
        padding-right: 10%;
      }
    }

    @media (max-width: 768px) {
      .feature-list{
        text-align: center;
      }
      .image-computer{
        text-align: center;
        display: block;
        position: static;
        margin: auto;
        width: 100%;
      }
    }

    @media (max-width: 376px) {

      body {
        padding: 25% 12% 0 12%;
      }

      .para {
        padding: 1rem 0 0 0;
      }

      .ios {
        text-align: center;
      }

      .mac {
        text-align: center;
      }
    }

<body>

  <section id="title">

    <img class="logo" src="images/logo.svg" alt="logo">
    <h1 class="heading">A history of everything you copy</h1>
    <p class="para">Clipboard allows you to track and organize everything you copy. Instantly access your clipboard on all your devices.</p>

    <div class="container-fluid">
      <div class="row">
        <div class="col ios">
          <button class="btn-ios" type="button" name="button">Download for iOS</button>
        </div>
        <div class="col mac">
          <button class="btn-mac" type="button" name="button">Download for Mac</button>
        </div>
      </div>
    </div>
    <h1 class="snippets">Keep track of your snippets</h1>
    <p class="para">Clipboard instantly stores any item you copy in the cloud,
      meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</p>
  </section>

  <section id="features">
    <div class="container-fluid">
      <div class="row imac g-0">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
          <img class="image-computer" src="images/image-computer.png" alt="image-computer">
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 feature-list">
          <div class="feature-list-div">
            <h3>Quick Search</h3>
            <p>Easily search your snippets by content, category, web address, application, and more.</p>
            <h3>iCloud Sync</h3>
            <p>Instantly saves and syncs snippets across all your devices.</p>
            <h3>Complete History</h3>
            <p>Retrieve any snippets from the first moment you started using the app.</p>
          </div>
        </div>
      </div>
    </div>
    <h1 class="center-feature clipboard">Access Clipboard anywhere</h1>
    <p class="center-feature para">Whether you’re on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.</p>
    <img class="image-devices" src="images/image-devices.png" alt="image-devices">
    <h3 class="center-feature">Supercharge your workflow</h3>
    <p class="center-feature para">We’ve got the tools to boost your productivity.</p>
    <div class="container-fluid feature-second">
      <div class="row">
        <div class="col">
          <img class="icon-feature" src="images/icon-blacklist.svg" alt="icon-blacklist">
          <h5>Create blacklists</h5>
          <p>Ensure sensitive information never makes its way to your clipboard by excluding certain sources.</p>
        </div>
        <div class="col">
          <img class="icon-feature" src="images/icon-text.svg" alt="icon-text">
          <h5>Plain text snippets</h5>
          <p>Remove unwanted formatting from copied text for a consistent look.</p>
        </div>
        <div class="col">
          <img class="icon-feature" src="images/icon-preview.svg" alt="icon-preview">
          <h5>Sneak preview</h5>
          <p>Quick preview of all snippets on your Clipboard for easy access.</p>
        </div>
      </div>
    </div>
  </section>

  <div class="container-fluid sponsers">
    <div class="row">
      <div class="col-sm">
        <img class="google" src="images/logo-google.png" alt="logo-google">
      </div>
      <div class="col-sm">
        <img class="ibm" src="images/logo-ibm.png" alt="logo-ibm">
      </div>
      <div class="col-sm">
        <img class="microsoft" src="images/logo-microsoft.png" alt="logo-microsoft">
      </div>
      <div class="col-sm">
        <img class="hp" src="images/logo-hp.png" alt="logo-hp">
      </div>
      <div class="col-sm">
        <img class="vector-graphics" src="images/logo-vector-graphics.png" alt="logo-vector-graphics">
      </div>
    </div>
  </div>

  <section id="cta">
    <h2>Clipboard for iOS and Mac OS</h2>
    <p class="para">Available for free on the App Store. Download for Mac or iOS, sync with iCloud and you’re ready to start adding to your clipboard.</p>
    <div class="container-fluid">
      <div class="row">
        <div class="col ios">
          <button class="btn-ios" type="button" name="button">Download for iOS</button>
        </div>
        <div class="col mac">
          <button class="btn-mac" type="button" name="button">Download for Mac</button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div class="container-fluid">
      <div class="row footer-row">
        <div class="col">
          <img class="footer-logo" src="images/logo.svg" alt="logo">
        </div>
        <div class="col">
          <a class="first-footer link" href="#">FAQs</a>
          <a class="link" href="#">Contact Us</a>
        </div>
        <div class="col">
          <a class="first-footer link" href="#">Privacy Policy</a>
          <a class="link" href="#">Press Kit</a>
        </div>
        <div class="col">
          <a class="link" href="#">Install Guide</a>
        </div>
        <div class="col social-icon">
          <i class="fab fa-facebook-square fb-icon fa-2x"></i>
          <i class="fab fa-twitter twitter-icon fa-2x"></i>
          <i class="fab fa-instagram insta-icon fa-2x"></i>
        </div>
      </div>
    </div>

    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://mohak-goel.github.io/CSS---My-Site/">Mohak Goel</a>.
    </p>
  </footer>
</body>

这是实际结果屏幕截图

这是所需的结果屏幕截图

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2021-02-20 14:04:17

如果希望较小显示器上的列为整个显示器的宽度，请使用不带大小的col-12。然后选择宽度以切换到显示宽度的一半的两列，并添加适当的类，如col-md-6中所示。这将为您提供一个从智能手机到平板电脑的全宽列(767px宽)。对于任何较大的(超过767px宽)，您将有两列，每列显示宽度的一半。

  <div class="container-fluid">
    <div class="row imac g-0">
      <div class="col-12 col-md-6">
        <img class="image-computer" src="images/image-computer.png" alt="image-computer">
      </div>
      <div class="col-12 col-md-6 feature-list">
        <div class="feature-list-div">
          <h3>Quick Search</h3>
          <p>Easily search your snippets by content, category, web address, application, and more.</p>
          <h3>iCloud Sync</h3>
          <p>Instantly saves and syncs snippets across all your devices.</p>
          <h3>Complete History</h3>
          <p>Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>
    </div>
  </div>

如果您希望在较小的显示器上并排显示列，而在较宽(768px或更大)的显示器上显示一列，则可以使用col-6 col-md-12

<div class="container-fluid">
    <div class="row imac g-0">
      <div class="col-6 col-md-12">
        <img class="image-computer" src="images/image-computer.png" alt="image-computer">
      </div>
      <div class="col-6 col-md-12 feature-list">
        <div class="feature-list-div">
          <h3>Quick Search</h3>
          <p>Easily search your snippets by content, category, web address, application, and more.</p>
          <h3>iCloud Sync</h3>
          <p>Instantly saves and syncs snippets across all your devices.</p>
          <h3>Complete History</h3>
          <p>Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>
    </div>
  </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66281001

复制

相似问题

问bootstrap 5网格布局col-md-6不能正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap 5网格布局col-md-6不能正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap 5网格布局col-md-6不能正常工作
EN