页脚中的网格不适合移动屏幕

发布于 2025-02-09 07:49:09 字数 1956 浏览 1 评论 0原文

我的网站有一个页脚，该页面设置为粘性位置。

它包含以下代码

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
}

.footer-buttons {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="footer">
  <div id="footer-controls" class="" style="background-color: rgba(0, 0, 0, 0.05);">
    <div class="row">
      <div class="col-sm-5">
        <button type="reset" class="footer-buttons btn btn-danger btn-lg" form="user-control-form">Cancel</button>
      </div>
      <div class="col-sm-2">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary" id="btn-back-to-top">Return To Top</button>
          <button type="button" class="btn btn-info">Info</button>
        </div>
      </div>
      <div class="col-sm-5">
        <button type="button" class="footer-buttons btn btn-success btn-lg" onclick="onSave()">Save</button>
      </div>
    </div>
  </div>

  <div id="footer-banner" class="text-center p-4" style="background-color: green; display: none;">
    SAVED!
  </div>
</footer>

网站在笔记本电脑尺寸工作中工作时看起来正确

我的。

我将如何制作它，以便我的页脚布局在各种视口上保持不变并查看

原文

I have a footer to my website which is set to the sticky position.

It contains the following code

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
}

.footer-buttons {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="footer">
  <div id="footer-controls" class="" style="background-color: rgba(0, 0, 0, 0.05);">
    <div class="row">
      <div class="col-sm-5">
        <button type="reset" class="footer-buttons btn btn-danger btn-lg" form="user-control-form">Cancel</button>
      </div>
      <div class="col-sm-2">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary" id="btn-back-to-top">Return To Top</button>
          <button type="button" class="btn btn-info">Info</button>
        </div>
      </div>
      <div class="col-sm-5">
        <button type="button" class="footer-buttons btn btn-success btn-lg" onclick="onSave()">Save</button>
      </div>
    </div>
  </div>

  <div id="footer-banner" class="text-center p-4" style="background-color: green; display: none;">
    SAVED!
  </div>
</footer>

My site looks correct when working within a laptops dimensions like so

But when I resize to a mobile dimensions the footer stacks like below instead of maintaining the layout from before.

How will I be able to make it so that my footers layout stays the same across various viewports and viewsizes

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满栀 2025-02-16 07:49:09

在父上使用.flex-nowrap。

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
}

.footer-buttons {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="footer">
  <div id="footer-controls" class="" style="background-color: rgba(0, 0, 0, 0.05);">
    <div class="row flex-nowrap">
      <div class="col-sm-4 col-lg-5">
        <button type="reset" class="footer-buttons btn btn-danger btn-lg" form="user-control-form">Cancel</button>
      </div>
      <div class="col-sm-4 col-lg-2 text-center">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary" id="btn-back-to-top">Return To Top</button>
          <button type="button" class="btn btn-info">Info</button>
        </div>
      </div>
      <div class="col-sm-4 col-lg-5">
        <button type="button" class="footer-buttons btn btn-success btn-lg" onclick="onSave()">Save</button>
      </div>
    </div>
  </div>

  <div id="footer-banner" class="text-center p-4" style="background-color: green; display: none;">
    SAVED!
  </div>

Use .flex-nowrap on the parent.

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
}

.footer-buttons {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="footer">
  <div id="footer-controls" class="" style="background-color: rgba(0, 0, 0, 0.05);">
    <div class="row flex-nowrap">
      <div class="col-sm-4 col-lg-5">
        <button type="reset" class="footer-buttons btn btn-danger btn-lg" form="user-control-form">Cancel</button>
      </div>
      <div class="col-sm-4 col-lg-2 text-center">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary" id="btn-back-to-top">Return To Top</button>
          <button type="button" class="btn btn-info">Info</button>
        </div>
      </div>
      <div class="col-sm-4 col-lg-5">
        <button type="button" class="footer-buttons btn btn-success btn-lg" onclick="onSave()">Save</button>
      </div>
    </div>
  </div>

  <div id="footer-banner" class="text-center p-4" style="background-color: green; display: none;">
    SAVED!
  </div>

回复收藏 0 原文

~没有更多了~