Question

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

        <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; }

所以网格cols更多在中间

Answer 2

我刚解决了。我在第二个网格中添加了margin-left。但是，我想要你们可能拥有的任何其他解决方案。

Answer 3

在网格之间添加间距的好方法是在列中添加另一个div。这样，您就不必在网格上设置任何边距。这是一个例子：

<div class="container-fluid">
 <div class="row">
   <div class="col-md-4">
    <div class="your-custom-div">
       <p>Putting this custom div will allow you to have natural
       spacing betweem the grid. </p>
    </div>
   </div>
 </div>
</div>

你的专栏显然必须添加到12个。我只使用了4/12以上。如果您感到困惑，请随时留言。

干杯，

使用bootstrap3的网格问题...需要网格之间的空间

3 个答案: