css - bootstrap3 的网格问题...网格之间需要空间

Question

我正致力于使用 bootstrap3 进行格式化以获得更好的用户体验。我决定实现行流体(网格)布局。然而，问题是两个网格相互粘在一起，而不是在它们之间有一些空间。就像第二个网格无法分辨 float 结束的位置。我已经尝试清楚，在线搜索但到目前为止没有运气。我感谢我能得到的任何帮助。这是我的代码

        <div class="row-fluid">
        <!--First grid-->
            <div class="col-lg-4 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
                <div class="thumbnail pull-left"> 
                    <?php echo '<img class="profilePic" class="img-responsive" src="../' . $imageProfile . '" height="160" width="160" style="border-radius:10px;" />';?>
                    <p class="updateProfilePic">
                        Update profile picture
                        <br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../webImage/cameraIcon.png" height="20" width="20"/>
                    </p>
                </div>
                <div>
                    <h3><?php echo $name?></h3>
                    <h4><?php echo $type?></h4> 
                </div>
                <div style="clear:both" class="row-fluid">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">About Me</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $about?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Email</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $email?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Phone</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $phone?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Website</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $website?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Experience</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $experience?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">City</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $city?></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--Second grid-->
            <div class="clearfix col-lg-7 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
                <div class="thumbnail"  >
                    <?php echo '<img src="../' . $imageCover . '" height="180" width="350"/>';?>
                </div>
                <p class="updateCoverPic">
                    Update cover picture
                    <br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../webImage/cameraIcon.png" height="20" width="20"/>
                </p>
                <div class="panel panel-default">
                    <div class="panel-heading active" style="color:white">
                        <div class="panel-title">Nearby Events</div>
                    </div>
                    <div class="panel-heading">
                        <div class="panel-title">
                            <div class="loadContent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

您可以为一行中的所有网格列设置边距

.class{ margin:0 20px; }

所以网格列更多在中间