如何在Bootstrap中叠加层？

Question

如何在Bootstrap中叠加层？

htmlcsstwitter-bootstraptwitter-bootstrap-3

3

我正在使用Bootstrap，并且我有一个锚标签和一些文本，我想在另一个文本区域的角落中覆盖它。问题是，Bootstrap列浪费了空间。下面是它目前的情况，其中突出显示了divs，下面是我希望文本流动的方式：

目前的情况

<div id="mainWrapper" class="wrapper">
    <div class="content-main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xxs-12 col-xs-10">
                    <p>Chuck Norris challenged Spain to a football match and won Chuck Norris can win a game of Connect Four in only three moves. Chuck Norris does not sleep. He waits. The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably, Chuck Norris is the reason why Waldo is hiding, Chuck Norris drives an ice cream truck covered in human skulls. When Chuck Norris went to Vegas, Sinatra sang "Your Way.", Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV Chuck Norris counted to infinity - twice. </p>
                </div>
                <div class="col-xxs-12 col-xs-2 semi-transparent">
                    <a html="www.google.com">Spanish</a>
                </div>
            </div>
        </div>
    </div>
</div>

期望选项1（包裹式）

期望选项2（浮动在顶部）

如何最好地实现此功能？

- Daryl

请发布您尝试过的代码。 - j08691

@j08691，我发布我拥有的内容，但是这个页面是全新的，所以我对任何事情都持开放态度。只需要一种有效的方式来在西班牙语和英语版本之间切换销售电话代理脚本。 - Daryl

3个回答

0

期望的选项 2

只需将您想要放置另一个 div 的 div 设置为 position:relative;，然后使用 position:absolute; 和 top、right 等将覆盖层 div 放置在所需位置。

.main {
  position:relative;
  height:150px;
  background:#333;
}

.overlay {
  position:absolute;
  top:0;
  right:0;
  height:25px;
  width:25px;
  background:green;
}

<div class="main">
  <div class="overlay"></div>
</div>

- Smort

0

请查看我的 CodePen：示例

<html>
  <body>
<div class='container'>

<div class="row">
  <div class="col-md-10" style='background:red'>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
  </div>
  <div class="col-md-2" style='background:yellow'>SPANISH</div>
</div>


<div class="row">
  <div class="col-md-12" style='background:blue'>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
  </div>
  <div class="col-md-1 col-md-push-9" style='background:green;position:absolute;'>SPANISH</div>
</div>

  </div>
</div>
  </body>
</html>

另外请参考以下内容：

- Kyle Pastor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian · Accepted Answer

Bootstrap有一个专门用于关闭按钮的类，它就在顶部，正如您想要的一样。这可能很有用。像这样使用它：

<div class="col-xxs-12 col-xs-10">
    <div class="close">
        <a html="www.google.com">Spanish</a>
    </div>
    <p>Chuck Norris challenged Spain to a football match and won Chuck Norris can win a game of Connect Four in only three moves. Chuck Norris does not sleep. He waits. The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably, Chuck Norris is the reason why Waldo is hiding, Chuck Norris drives an ice cream truck covered in human skulls. When Chuck Norris went to Vegas, Sinatra sang "Your Way.", Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV Chuck Norris counted to infinity - twice. </p>
</div>

你可以向它添加另一个类来覆盖它。