Home / Questions / 4352
Accepted
fredyfx
Asked: 2020-02-18 10:38:36 +0800 CST 2020-02-18 10:38:36 +0800 CST

如何使用 Twitter Bootstrap 制作正确的浮动 DIV？

  • 772

我有以下带有 Bootstrap 的 HTML 结构

<div class="row">
    <div class="col-md-9">
     Aqui hay tanto contenido que el scrollbar se va hasta China
    </div>
    <div class="col-md-3">
        <div> 
            Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
    </div>
</div>

当与类一起使用position:fixed时，它会向左移动并放置在 的内容上。我使用了 Bootstrap 词缀，但它对我不起作用。divcol-md-3div col-md-9

html5

3 Answers

  1. Best Answer

    由于引导网格系统，col-md-3引导类已经将 定位div在右侧。不建议将类分配给它以浮动或固定位置，但您可以使用<div>内部来执行此操作。

    要实现您正在寻找的内容，只需添加style="position: fixed;"内部<div>。

    <div class="row">
  <div class="col-md-9">
    Aqui hay tanto contenido que el scrollbar se va hasta China
  </div>
  <div class="col-md-3">
    <div style="position: fixed;">
      Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
    </div>
  </div>
</div>
    • 5

  2. 在不使用其他“引导”类或插件的情况下，它看起来像这样：

    <div class="row">
     <div class="col-md-9">
      Aqui hay tanto contenido que el scrollbar se va hasta China
     </div>
      <div class="col-md-3">
         <div style="position:fixed;left:79.1%;"> 
      Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
     </div>
</div>

    我希望你对你有所帮助。

    • 1

  3. 如果您打算将 div 放置在容器的右侧，您将如何float:right:使用该类.pull-right。

    或者，如果您希望始终将 div 保持在固定位置的右侧，请尝试以下操作： 

    <div class="row">
    <div class="col-md-9">
     Aqui hay tanto contenido que el scrollbar se va hasta China
    </div>
    <div class="col-md-3" style="position: fixed;right: 0;z-index:9999">
        <div> 
            Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
    </div>
</div>

    添加<div>要设置以下样式的样式：style="position: fixed;right: 0;z-index:9999"

    • 1