css - 在 safari 中替代绝对定位？

Question

我需要先声明，我不是前端 Web 开发人员。我在最近的一份工作中被投入其中，我正在努力充分利用留给我的东西。我有一个包含三个垂直堆叠按钮的 div。它最初出现在页面右侧的段落旁边。在移动时，我只是给它一个带有 Bootstrap 的 col-xs-12，这使它以全宽显示在段落上方。这正是我想要的，但是，safari 似乎对该设计有其他计划。我没有掌握适合所有浏览器的替代方案，我希望我能对此有第二双眼睛。为了清楚起见，我将附上图片和 CSS。

上图是它在桌面上的样子，没有应用 css 定位，结构如下所示

<div class="req-btn-container col-xs-12">
   <div><a></a></div>
   <div><a></a></div>
   <div><a></a></div>
</div>

现在下面是一张它在移动 View 中的外观以及我希望它在 safari 中的外观的照片。

这是通过设置 1200px 的媒体查询实现的

div.req-btn-container{
        position:absolute;
        right:0px;
    }

最后这是它在 safari 上的样子......

鉴于颜色可能有点难以看清，但基本上 safari 上的框出现在 div 出现的位置，如果它没有给出绝对位置(在段落下方而不是上方)我也给了段落很大margin top 为段落上方的框腾出空间，在 safari 上也没有呈现这个顶部边距间隙。我一直在读到我应该将 absolute 换成 position:relative 但是当我这样做时我无法让框跨越页面的整个宽度。有任何想法吗？我希望我尽可能清楚，如果不是请在评论中告诉我。谢谢!

Answer 1

1. 确保侧边栏和内容的直接父级具有类 row
2. 将 col-sm-9 col-xs-12 添加到内容元素。确保将类添加到 .row
的直接子级
3. 将 col-sm-3 col-xs-12 类添加到您的按钮容器中。 (也是父级 .row 的直接子级和 .col-sm-9.col-xs-12 的兄弟级)
4. 从您的 CSS 中删除上面引用的 CSS(从 .req-btn-container 中删除 position:absolute)。

这将使按钮侧边栏从 side 切换到 full-width 布局 768px (如果你没有修改你的 bootstrap.css)。如果您希望它在 992px 处切换，请将上面的 col-sm-*s 替换为 col-md-*s。

 .btn-group-vertical {
    width: 100%;
    margin-top: 15px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9 col-xs-12">
      Jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water and sometimes switches in french and say "miaou" just because well why not and then cats take over the world paw at your fat belly. Hide when guests come over. Scream at teh bath make meme, make cute face lick the curtain just to be annoying and meow all night having their mate disturbing sleeping humans my slave human didn't give me any food so i pooped on the floor, or sit on human eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Love to play with owner's hair tie peer out window, chatter at birds, lure them to mouth chase after silly colored fish toys around the house, kick up litter but pee in human's bed until he cleans the litter box meow chirp at birds.
    </div>
    <div class="req-btn-container col-sm-3 col-xs-12">
      <div class=" btn-group-vertical">
        <a class="btn btn-primary btn-group">Find a representative</a>
        <a class="btn btn-primary">Request a quote</a>
        <a class="btn btn-warning">Order parts</a>
    </div>
  </div>
</div>

注意:在我的示例中，我冒昧地更改了按钮的布局，只是为了向您展示如何使用 bootstrap 方式对按钮进行编码，使用 btn-group-vertical 用于相同的功能。它不是解决方案的一部分，它只是提供信息。另请注意，我的解决方案中的 CSS 部分与 btn-group-vertical 的使用相关，因此它也是可选的。