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

Как сделать правильный плавающий DIV с помощью Twitter Bootstrap?

  • 772

У меня есть следующая структура HTML с Bootstrap

<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:fixedin divс классом col-md-3он перемещается влево и помещается в содержимое файла div col-md-9. Я использовал аффикс Bootstrap, и это не сработало для меня.

html5

3 Answers

  1. Best Answer

    Класс col-md-3начальной загрузки уже позиционирует divсправа благодаря системе сетки начальной загрузки. Не рекомендуется назначать ему классы для плавания или фиксированного положения, но вы можете сделать это с помощью <div>внутреннего.

    Чтобы достичь того, что вы ищете, просто добавьте файл style="position: fixed;"internal <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. Без использования других классов или плагинов 'bootstrap' это будет выглядеть так:

    <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:использовали class .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