2

Tengo la siguiente estructura de HTML con 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>

Al usar position:fixed en el div con la clase col-md-3, se va a la izquierda y se pone sobre el contenido del div col-md-9. Utilice el affix de Bootstrap y no me dio resultado.

3 respuestas 3

5

La clase col-md-3 de bootstrap ya posiciona el div a la derecha gracias al sistema de cuadrícula de bootstrap. No es recomendable asignarle clases para flotarlo o posicionarlo fijamente, pero si puedes hacer esto con el <div> interno.

Para lograr lo que buscas sólo agrega style="position: fixed;" al <div> interno.

<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>
1

Sin utilizar otras clases o plugins de 'bootstrap', quedaría de la siguiente manera:

<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>

Espero les haya sido de utilidad.

1

Si te refieres a posicionar el div hacia la derecha de un contenedor cómo si usaras float:right: usa la clase .pull-right.

O si por el contrario quieres mantener siempre el div hacia la derecha con un a posición fija prueba lo siguiente:

<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>

Agregando al <div> que quieres fijar el siguiente estilo: style="position: fixed;right: 0;z-index:9999"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.