Question

我试图创建一个带有引导行和列的页脚，我想通过减少行之间的间距来缩小页脚。我试过更改行的边距和填充无效。

<footer class="footerClass">
        <div class="row footerRow">
            <div class="col-md-4">
                <b>Content</b>
            </div>
            <div class="col-md-3">
                <p>Content</p>
            </div>
            <div class="col-md-4">
                &nbsp;
            </div>
        </div>
        <div class="row footerRow">
            <div class="col-md-4">
                <p>Content</p>
            </div>
            <div class="col-md-3">
                <p><a href="mailto:Content">Content</a></p>
            </div>
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
        </div>
        <div class="row footerRow">
            <div class="col-md-4">
                <p>Content</p>
            </div>
            <div class="col-md-3">
                <p>Content</p>
            </div>
            <div class="col-md-2">
                <p><a href=""><b>Content</b></a></p>
            </div>
            <div class="col-md-3">
                <p><a href=""><b>Content</b></a></p>
            </div>
        </div>
        <div class="row footerRow table-condensed">
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
            <div class="col-md-3">
                <p><a href="www.Content.org">www.Content.org</a></p>
            </div>
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
        </div>
    </footer>

Answer 1

您的其他课程可能会导致您看到的间距问题。我会按以下方式重写您的页脚，看看它是否能解决您的问题：

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <b>Content</b>
            </div>
            <div class="col-md-3">
                <p>Content</p>
            </div>
            <div class="col-md-4">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <p>Content</p>
            </div>
            <div class="col-md-3">
                <p><a href="mailto:Content">Content</a></p>
            </div>
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <p>Content</p>
            </div>
            <div class="col-md-3">
                <p>Content</p>
            </div>
            <div class="col-md-2">
                <p><a href=""><b>Content</b></a></p>
            </div>
            <div class="col-md-3">
                <p><a href=""><b>Content</b></a></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
            <div class="col-md-3">
                <p><a href="www.Content.org">www.Content.org</a></p>
            </div>
            <div class="col-md-4">
                <p>&nbsp;</p>
            </div>
        </div>    
    </div>
</footer>

此外，通常在使用bootstrap网格时，每行的列宽最多为12。这可能是故意的。

我使用以下类来处理设计中的垂直间距：

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset  { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; } 
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }

Answer 2

媒体查询的最小宽度＆＃34; col-md-xx＆＃34;是992px，尝试使用＆＃34; col-sm-xx＆＃34;来应用课程。可能是你在问这个。

如何使引导行更接近？

2 个答案: