Question

这是我第一次使用bootstrap，我用它来创建一个简单的表单布局但我的问题是在firefox上与chrome不一样

http://i.imgur.com/ZKbZTFd.png“chrome”

http://i.imgur.com/bhoCdvO.png“firefox”

<div class="row" style="margin:10px;">
                <div class="col-md-12" onclick="traveler();" style="background-color:#005FB0;height:44px;margin-bottom:10px;cursor:pointer;">
                    <span class="bookingFormulaire">1. Who's travelling ?</span>
                    <span class="arrow-up" id="travelerArrow" style="float:right;"></span>
                </div>

                <div id="traveler">


                @for($i = 0; $i < count($passagers); $i++)
                    @if($i==0)
                        <h4>Passager - Adulte (Contact principal)</h4>
                    @else
                        @if($passagers[$i] >= 12)
                            <h4>Passager - Adulte</h4>
                        @elseif($passagers[$i] <= 11 && $passagers[$i] >= 2)
                            <h4>Passager - Enfant</h4>
                        @else
                            <h4>Passager - Bébé</h4>
                        @endif
                    @endif
                    <div class="col-md-4">
                        <div class="form-group form-group-select-plus">
                            <label><span style="color:red;">*</span>Title</label>
                            @if(isset($erreurs['title_'.$i]))
                                {{ Form::select('title_'.$i, array('0' => '-', 'Mr' => 'Mr.' , 'Miss' => 'Miss.' , 'Mrs' => 'Mrs.' , "Ms" => "Ms.") , null , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::select('title_'.$i, array('0' => '-', 'Mr' => 'Mr.' , 'Miss' => 'Miss.' , 'Mrs' => 'Mrs.' , "Ms" => "Ms.") , null , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div style="height:76px;"></div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group form-group-icon-left">
                            <i class="fa fa-user input-icon"></i>
                            <label><span style="color:red;">*</span>Name</label>
                            @if(isset($erreurs['name_'.$i]))
                                {{ Form::text('name_'.$i, '' , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::text('name_'.$i, '' , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group form-group-icon-left">
                            <i class="fa fa-user input-icon"></i>
                            <label>Middle name</label>
                            @if(isset($erreurs['middlename_'.$i]))
                                {{ Form::text('middlename_'.$i, '' , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::text('middlename_'.$i, '' , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group form-group-icon-left">
                            <i class="fa fa-user input-icon"></i>
                            <label><span style="color:red;">*</span>Last name</label>
                            @if(isset($erreurs['lastname_'.$i]))
                                {{ Form::text('lastname_'.$i, '' , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::text('lastname_'.$i, '' , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    @if($i==0)
                        <div class="col-md-4">
                            <div class="form-group form-group-select-plus">
                                <label><span style="color:red;">*</span>Country</label>
                                @if(isset($erreurs['country_'.$i]))
                                    {{ Form::select('country_'.$i, array() , null , array('class' => 'form-control' , 'style' => 'border:1px solid red' , 'id' => 'country')) }}
                                @else
                                    {{ Form::select('country_'.$i, array() , null , array('class' => 'form-control' , 'id' => 'country'))}}
                                @endif
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group form-group-select-plus">
                                <label><span style="color:red;">*</span>State</label>
                                @if(isset($erreurs['state_'.$i]))
                                    {{ Form::select('state_'.$i, array() , null , array('class' => 'form-control' , 'style' => 'border:1px solid red' , 'id' => 'state')) }}
                                @else
                                    {{ Form::select('state_'.$i, array() , null , array('class' => 'form-control' , 'id' => 'state'))}}
                                @endif
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div style="height:76px;"></div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group form-group-icon-left">
                                <i class="fa fa-phone input-icon"></i>
                                <label><span style="color:red;">*</span>Primary phone</label>
                                @if(isset($erreurs['phone_'.$i]))
                                    {{ Form::text('phone_'.$i, '' , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                                @else
                                    {{ Form::text('phone_'.$i, '' , array('class' => 'form-control'))}}
                                @endif
                            </div>
                        </div>
                    @endif

                    <div class="col-md-2">
                        <div class="form-group form-group-select-plus">
                            <label><span style="color:red;">*</span>Date of birth</label>
                            @if(isset($erreurs['dob_day_'.$i]))
                                {{ Form::select('dob_day_'.$i, $day , null , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::select('dob_day_'.$i, $day , null ,  array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group form-group-select-plus">
                            <label style="height:22px;"></label>
                            @if(isset($erreurs['dob_month_'.$i]))
                                {{ Form::select('dob_month_'.$i, $month , null , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::select('dob_month_'.$i, $month , null , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group form-group-select-plus">
                            <label style="height:22px;"></label>
                            @if(isset($erreurs['dob_year_'.$i]))
                                {{ Form::select('dob_year_'.$i, $year , null , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::select('dob_year_'.$i, $year , null , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="height:76px;"></div>
                    </div>

                    @if($i != 0)
                        <div class="col-md-4">
                        @if($passagers[$i] >= 12)
                                <div style="height:76px;"></div>
                        @elseif($passagers[$i] <= 11 && $passagers[$i] >= 2)
                            <span class="blueText">This child passenger must be 2 years of age on the departure date and under 12 years of age on the return date to qualify for child pricing on this itinerary.</span>
                        @else
                            <span class="blueText">This baby passenger must be under 2 years of age on the return date to qualify for child pricing on this itinerary.</span>
                        @endif              
                        </div>
                    @endif

                @endfor
                </div>
            </div>
</div>

Answer 1

尝试在每个12 <div class="row"></div>列定义周围添加col-md-*，而不是将所有列定义放在<div class="row"></div>列中。这有助于确保您要实施的行正确清除。另外，我会避免为任何<div class="row"></div>的所有边设置边距，因为容器/行/ col- *的填充/边距也有助于清除和正确响应。

bootstrap.css附带的类.row的样式是：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

在行定义中有助于确保行在每一侧都有适当的填充，并与col定义一起使用以创建装订线。通过style="margin:10px;"，您可以否定课程.row的目标，这会导致您的表单中出现各种问题。

<div class="row">
                <div class="col-md-12" onclick="traveler();" style="background-color:#005FB0;height:44px;margin-bottom:10px;cursor:pointer;">
                    <span class="bookingFormulaire">1. Who's travelling ?</span>
                    <span class="arrow-up" id="travelerArrow" style="float:right;"></span>
                </div>
</div>  



<div class="row">           
    <div id="traveler">      
                @for($i = 0; $i < count($passagers); $i++)
                    @if($i==0)
                        <h4>Passager - Adulte (Contact principal)</h4>
                    @else
                        @if($passagers[$i] >= 12)
                            <h4>Passager - Adulte</h4>
                        @elseif($passagers[$i] <= 11 && $passagers[$i] >= 2)
                            <h4>Passager - Enfant</h4>
                        @else
                            <h4>Passager - Bébé</h4>
                        @endif
                    @endif
                    <div class="col-md-4">
                        <div class="form-group form-group-select-plus">
                            <label><span style="color:red;">*</span>Title</label>
                            @if(isset($erreurs['title_'.$i]))
                                {{ Form::select('title_'.$i, array('0' => '-', 'Mr' => 'Mr.' , 'Miss' => 'Miss.' , 'Mrs' => 'Mrs.' , "Ms" => "Ms.") , null , array('class' => 'form-control' , 'style' => 'border:1px solid red')) }}
                            @else
                                {{ Form::select('title_'.$i, array('0' => '-', 'Mr' => 'Mr.' , 'Miss' => 'Miss.' , 'Mrs' => 'Mrs.' , "Ms" => "Ms.") , null , array('class' => 'form-control'))}}
                            @endif
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div style="height:76px;"></div>
                    </div>

为了简洁起见，我没有添加其余部分，但是放置12个col-md-*将帮助您实现您正在寻找的布局。您可以在其他行中嵌套<div class="row"></div>和col-md-*。

如果您仍然看到清除问题和正确的行布局问题，您可以使用Responsive Column Resets（例如<div class="clearfix visible-md-block"></div>

）在响应断点处进行清算

如果有帮助，请告诉我。

Answer 2

您是否通过供应商前缀运行CSS？那是我开始调查的地方。

修改：请参阅link

在chrome和firefox上的不同布局与bootstrap

2 个答案: