Soy nuevo en el Bootstrap 4 y parece que no puede obtener de flotación de la derecha en un col div de trabajo dentro de una fila. Aquí está mi código:

<div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>

</div>
</div>

Extrañamente funciona bien sin la fila como un div padre, pero me gustaría utilizar la fila. Me estoy perdiendo algo?

Gracias
🙂

7 Comentarios

  1. 13

    Bootstrap 4 ha incorporado Flexbox para sus diseños. Usted puede obtener el resultado deseado mediante la adición de la clase ‘justify-content-end’ para el contenedor primario.

    HTML:

    <div class="row justify-content-end" >
      <div class="col-md-8" style="border: 1px solid red;">
        <h3>Five grid tiers</h3>
        <p>Hi</p>
      </div>
    </div>

    Si quieres aprender los conceptos básicos de Flexbox, te recomiendo que compruebes este rápido y divertido tutorial: http://flexboxfroggy.com/. Es un gran sistema, a pesar de que no es compatible en el Legado de IE (IE 9 y versiones anteriores).

  2. 7

    fila es un contenedor flex en bootstrap-4, para alinear el contenido en flex-contenedor deberá utilizar ml-auto y mr-auto.

    Aquí está el ejemplo:

    HTML:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <div class="row ml-1">
      <div>
         Hello from left
      </div>
      <div class="ml-auto mr-3">
         Hello from right
      </div>
    </div>

    Aquí está el oficial docuemtation enlace y ejemplo:
    https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

    Para casos como cuando contenedor flex no está siendo utilizado, puede utilizar float-right que es el equivalente de pull-right en versiones anteriores.

    También hay una utilidad Justificar El Contenido para cambiar la alineación de los elementos en el contenedor flex.

  3. 1

    Si todo lo que quieres es «tirar» de la columna a la derecha, usted puede utilizar un «offset». Desde que uso col-md-8, agregar offset-md-4.

    HTML:

    <div class="row">
      <div class="col-md-8 offset-md-4" style="border: 1px solid red;">
        <h3>Five grid tiers</h3>
        <p>Hi</p>
    
      </div>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

  4. 1

    Soren es correcta. Bootstrap 4 utiliza flex cuadro. Flota pegado! Tratar de olvidarlos!

    <div class="row justify-content-end">
      <div class="col-4"> One of two columns </div>
      <div class="col-4"> One of two columns </div>
    </div>

    Pull-right es un bootstrap 3 etiqueta.

    • «Tratar de olvidar a ellos!» – buen consejo
    • Sage respuesta. Gracias.
  5. 1

    Lo que puedes intentar:

    <div class="row float-right">
        <div class="col-md-8 float-right" style="border: 1px solid red;">
            <h3>Five grid tiers</h3>
            <p>Hi</p>
        </div>
    </div>

    Si usted está usando bootstrap 3, usted tendrá que usar pull-right en lugar de float-right.

  6. 0

    Bootstrap 4 utiliza flexbox. Usted puede solucionar este problema mediante la sustitución de ‘justify-content-end’ en lugar de ‘flotante’ bien’.

    <div class="row" >
        <div class="col-md-8 justify-content-end" style="border: 1px solid red;">
          <h3>Five grid tiers</h3>
          <p>Hi</p>    
        </div>
    </div>
  7. -1

    Para cshtml páginas con bootstrap usar debajo de

    @Html.ActionLink(«Volver»,»Índice»,»Controlador»,null, new { @class=»btn btn-advertencia»})

    @Html.ActionLink(«Crear Nuevo», «Crear», «Controlador», null, new { @class = «btn btn-primary» })

    • no relacionadas con la pregunta

Dejar respuesta

Please enter your comment!
Please enter your name here