bootstrap3 的网格问题...需要网格之间的空间答案

【问题标题】：Grid issue with bootstrap3...need space between gridsbootstrap3 的网格问题...需要网格之间的空间
【发布时间】：2015-02-10 04:23:15
【问题描述】：

我正在使用 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>

【问题讨论】：

您的网格有多少列？ 14 不是标准引导程序。
每个设备的列大小不同 col-xs 适用于超小型设备，我碰巧正在试验这些数字，到目前为止我观察到的是越大越友好它变成了移动设备。
.col-xs-12 是引导程序。 col-xs-14 需要修改引导网格系统。它不是默认配置。 Bootstrap 基于 12 列网格。
感谢您解决这个问题
另外，Bootstrap 3 没有row-fluid。它有row、container 和container-fluid，但没有row-fluid

标签： css twitter-bootstrap-3 grid

【解决方案1】：

我刚刚解决了。我将 margin-left 添加到第二个网格。不过，我支持你们可能拥有的任何其他解决方案。

【讨论】：

【解决方案2】：

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

.class{ margin:0 20px; }

所以网格列更多的是在中间

【讨论】：

【解决方案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。如果您感到困惑，请随时留言。

干杯，

【讨论】：