在safari中绝对定位的替代方案？

Question

我需要说一下，我不是前端Web开发人员。我在最近的一份工作中被抛入其中，我正在努力充分利用留给我的东西。我有一个包含三个垂直堆叠按钮的div。它最初出现在段落旁边的页面的右侧。移动时，我只给它一个带有自举的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>

下面是一张照片，展示了它在移动视图中的外观，以及我希望它如何在Safari中查看。

这是通过设置

的1200px的媒体查询实现的

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

最后这就是它在野生动物园中的表现......

考虑到颜色可能有点难以看见但是如果没有给出绝对位置（在段落下方而不是上面），那么在safari上的框子基本上会出现div出现的地方我也给了段落一个大的边距顶部为段落上方的框提供空间，并且在safari上，此顶部边距差距也未呈现。我一直在读，我应该交换绝对位置：相对但是当我这样做时，我无法让盒子跨越页面的整个宽度。有任何想法吗？我希望我尽可能清楚，如果没有，请在评论中告诉我。谢谢！

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（从position:absolute删除.req-btn-container）。

这会使按钮边栏从侧切换到768px处的全角布局（如果您尚未修改bootstrap.css ）。如果您希望在992px处切换，请将上面的col-sm-*替换为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的使用有关，因此它也是可选的。