Question

我是一名后端开发人员，试图让我的前端技能达到标准杆。我正在关注使用bootstrap建立投资组合网站的视频教程 - 但我遇到了麻烦。我已经对我的代码进行了三次检查，甚至开始上课，试着看看我是否只是一些愚蠢的错误（很可能）。

我的照片应该是3列宽的网格。不幸的是，图像显示为2列和2行，间距似乎不对（有太多）。

这是有问题的HTML。我已经包含了药丸导航代码，以防它相关。

<div class="container-fluid filterable-portfolio">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-pills">
            <li class="portfolio-title">Filter by:</li>
            <li role="presentation" class="active"><a href="#">All</a></li>
            <li role="presentation"><a href="#">School Projects</a></li>
            <li role="presentation"><a href="#">Personal Projects</a></li>
            <li role="presentation"><a href="#">Unity Projects</a></li>
            <li role="presentation"><a href="#">etc.</a></li>
            </ul>
        </div>
    </div>
    <div class="row portfolio-items">

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>

    </div>
</div>

这是CSS代码 - 不确定这是否是问题，但我认为更多的信息不会受到伤害。

.portfolio-title{
padding: 10px 15px 10px 0;
font-weight: bold;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {       
background: #111;
color: #f5f5f5;
}

.nav-pills a{
color: #f5f5f5;
margin-bottom: 1rem;
}

.nav>li>a:hover, .nav>li>a:focus {
background: none;
}

.portfolio-item {
margin-bottom: 1rem;    
}

.portfolio-item img {
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
border-radius:6px;
}

.portfolio-item:hover img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

.filterable-portfolio{
margin-bottom: 3rem;
}
.portfolio-item img{    
width :100%;    
}

对此的任何帮助都将非常感激。我真的很想知道我到底做错了什么。非常感谢您花时间来帮助解决这个问题！

Answer 1

试试这个..

<div class="container-fluid filterable-portfolio">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-pills">
            <li class="portfolio-title">Filter by:</li>
            <li role="presentation" class="active"><a href="#">All</a></li>
            <li role="presentation"><a href="#">School Projects</a></li>
            <li role="presentation"><a href="#">Personal Projects</a></li>
            <li role="presentation"><a href="#">Unity Projects</a></li>
            <li role="presentation"><a href="#">etc.</a></li>
            </ul>
        </div>
    </div>
    <div class="row portfolio-items">
        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>
        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure>
        <figure class="portfolio-item col-sm-4">
        <a href="#">
        <img src="http://placekitten.com/700/400" class="img-responsive">
        </a>
        </figure> 
        </div>
        </div>

你使用了6张照片，这就是为什么它需要2行。如果你想要6张照片是一个网格，它将每列2列...因为单个网格有12列...希望它有所帮助

使用引导程序遇到网格间距问题

1 个答案: