在laravel中对齐Bootstrap网格

时间:2017-10-03 13:11:18

标签: php css laravel bootstrap-4

目前我在一页中有Bootstrap网格,如下图所示。

My Bootstrap Grids

我想要如下图所示的网格带红色指示灯

Wanted my Bootstrap Grid Like This

<div class="row">
<div class="col-md-6">
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 10px;" action="#" class="form-horizontal" method="post" enctype="multipart/form-data">
    <label>My label</label>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="file" name="import_file"/> <br>
    <button class="btn btn-primary">Import File</button>
</form>
</div>

<div class="col-md-6">
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 10px;" action="#" class="form-horizontal" method="post" enctype="multipart/form-data">
    <label>My label</label>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="file" name="import_file"/> <br>
    <button class="btn btn-primary">Import File</button>
</form>
</div>

<div class="col-md-6">
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 10px;" action="#" class="form-horizontal" method="post" enctype="multipart/form-data">
    <label>My label</label>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="file" name="import_file"/> <br>
    <button class="btn btn-primary">Import File</button>
</form>
</div>

<div class="col-md-6">
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 10px;" action="#" class="form-horizontal" method="post" enctype="multipart/form-data">
    <label>My label</label>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="file" name="import_file"/> <br>
    <button class="btn btn-primary">Import File</button>
</form>
</div>
</div>

1 个答案:

答案 0 :(得分:0)

在上一个col上添加一些偏移量,例如:

   <div class="col-md-6 col-md-offset-3">
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 10px;" action="#" class="form-horizontal" method="post" enctype="multipart/form-data">
    <label>My label</label>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="file" name="import_file"/> <br>
    <button class="btn btn-primary">Import File</button>
</form>
</div>