如何在 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(浮动在顶部)

在此处输入图像描述

最好的方法是什么?

原文由 Daryl 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 310
2 个回答

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>

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

原文由 Brian 发布,翻译遵循 CC BY-SA 3.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 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题