Question

我正在使用bootstrap，我有一个锚标记，我想要覆盖在另一个文本区域的一角。问题是，bootstrap列浪费了空间。下面是id正在做什么，有div的亮点，下面就是我希望文本流动的方式：

电流

<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（浮在上面）

最好的方法是什么？

Answer 1

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>

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

Answer 2

所需选项2

只需将要放置其他div的div设置为position:relative;，然后将叠加div放在position: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>

Answer 3

请看我的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>

另请参阅以下内容：

如何在Bootstrap中叠加？

电流

期望的选项1（包裹）

期望的选项2（浮在上面）

3 个答案: