twitter-bootstrap 如何在 Bootstrap 中叠加？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41467294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay in Bootstrap?
提问by Daryl
I'm using bootstrap, and I have an anchor tag some text that I want to overlay in a corner of another text area. Problem is, that the bootstrap column is wasting space. Below is what id is doing now, with highlights of the divs, and below that is how I'd like the text to flow:
我正在使用引导程序，并且我有一个锚标记一些文本，我想将其覆盖在另一个文本区域的一角。问题是，引导列正在浪费空间。下面是 id 现在正在做的事情，带有 div 的亮点，下面是我希望文本流动的方式：
Current
当前的
<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>
Desired Option 1 (Wrapped)
所需选项 1（已包装）
Desired Option 2 (Floating on Top)
所需选项 2（浮动在顶部）
What's the best way to do this?
做到这一点的最佳方法是什么？
回答by Brian
Bootstrap has a class meant for the close button, happens to be on the top side just like you wanted. It might be useful. Use it like this:
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>
You can probably add another class to it to override it.
您可能可以向它添加另一个类来覆盖它。
回答by Smort
Desired Option 2
期望的选项 2
Just set the div in which you want the other div placed to position:relative;and then place the overlay div with position:absolute;and top, right, etc. where you need it.
只要设定要在其中的其他分区放置到div position:relative;，然后将与覆盖DIVposition:absolute;和top，right等在那里你需要它。
.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>回答by Kyle Pastor
Please see my codepen: Example
请参阅我的代码笔： 示例
<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>
Also please see the following:
另请参阅以下内容：
