Form disfigures DIV

Asked

Viewed 41 times

1

Div doesn’t stand side by side after I insert the {!! Form:: Inside the div Row, the div COL are broken, one below the other instead of side to side. Is it possible to solve this ? or it’s normal for Form to make this mess ?

Bootstrap 4.1 - Laravel 5.5

<div class="row">

{!! Form::model($produto, ['route' => ['admin.produtos.update', $produto->id],   'class' => 'form-horizontal', 'method'  => 'post', 'autocomplete' => 'off']) !!}
    @include('backend.produtos.games.informacoes')
    <div class="card-footer">
        <button type="submit" class="btn btn-success btn-sm">
            <i class="fa fa-save"></i> Atualizar Modificações
        </button>
        <button type="reset" class="btn btn-danger btn-sm">
            <i class="fa fa-trash-alt"></i> Reiniciar
        </button>
    </div>
{!! Form::close() !!}

{!! Form::model($produto, ['route' => ['admin.produtos.updateMidia', $produto->id],   'class' => 'form-horizontal', 'method'  => 'post', 'autocomplete' => 'off']) !!}
    @include('backend.produtos.games.midia')

    <div class="card-footer">
        <button type="submit" class="btn btn-success btn-sm">
            <i class="fa fa-save"></i> Salvar Imagem
        </button>
    </div>
{!! Form::close() !!}

</div>

Include code with Divs-col

<div class="col-lg-7">
 ...conteúdo...
</div>

And the other include

<div class="col-lg-5">
...conteúdo...
</div>
css laravel

  • Which version of Bootstrap you are using?

  • @hugocsl Bootstrap 4.1

  • I tested here by putting a tag <form> normal and lined up next to each other... but try the div <div class="card-footer"> put like this: <div class="card-footer col-6"> or something like "'class' => 'form-horizontal col-6',"and ve resolve

  • Try to set column width in tag <form>

  • when it includes in the form class the class col it has set, but the div col itself does not fill.. gets smaller.. neither placing col-7 and col-5 in the div on each side

  • On these Ivs on each side places the class w-100 this should make it occupy 100% of width. Look if it solves

  • did nothing... was decreasing here the browser.. when changes the resolution.. is right.. but when it is in the resolution above (min-width: 992px).. he stops filling in

  • Man that crazy.. I took the class of the lateral Divs.. and I went to the class of the 2 Forms.. and returned to normal.. as if the form takes the place of the Divs

  • But solved then? If not solved enter the page directly through the browser. Press Ctrl+U, take the code right there from the browser with the rendered page, including this form and etc. Edit your question and place that part there. Is there too much class or unnecessary div to find...

  • yes you solved.. t was the same before I put the form.. with the Divis aligned

Show 5 more comments

1 answer

2


Michael as stated in the independent commentary of being a form, or a div or a section you must put the classes of grid Bootstrap if you want to split your elements into columns.

As in your case form that needed to be aligned and divided within the .row, it was he who should receive the class col-xx

Type: 'class' => 'form-horizontal col-lg-7', for a form and 'class' => 'form-horizontal col-lg-5', on the other.

Here is the official documentation of grid of BS4: https://getbootstrap.com/docs/4.0/layout/grid/

  • 1

    you are right kkk.. nor harerava that you gave the idea.. if you did not speak I would take long or would not even think to put the class inside the form.. o// vlw brother thanks! tamo together!

  • @Michaelcosta tmj qq thing we are there.

Browser other questions tagged css laravel

You are not signed in. Login or sign up in order to post.