我试图通过使用数据库中的bootstrap缩略图列出相当多的图像。现在我只是为了确保它正常工作而设计它。到目前为止，我无法让缩略图只列出3行无限行。
这是jsfiddle https://jsfiddle.net/aje0tp27/2/
body {
padding-top: 70px;
/* background-color:#000;*/
background-color: transparent;
color: #cccccc;
}
.logo-abbr {
margin-left: -66px;
padding-top: 31px;
padding-bottom: 5px;
padding-right: 10px;
float: left;
vertical-align: text-bottom;
color: #b5b5b5;
text-decoration: underline;
}
.container-fluid {
margin-left: 30px;
margin-right: 30px;
}
.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-submenu {
margin-left: 20px;
}
.panel-sidemenu {
background-color: transparent;
border: 1px solid #222222;
}
a.list-group-item:focus,
a.list-group-item:hover,
button.list-group-item:focus,
button.list-group-item:hover {
color: #5dafd8;
text-decoration: none;
background-color: rgba(23, 23, 23, 0.84);
}
a.list-group-item,
button.list-group-item {
color: #08c;
}
.list-group-item {
background-color: transparent;
border: none;
font-size: 18px;
}
.list-group-subitem {
font-size: 14px;
}
.navbar-inverse {
/* background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%); */
/* background-image: -o-linear-gradient(top,rgba(60, 60, 60, 0.33) 0,rgba(34, 34, 34, 0.32) 100%);*/
/* background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222)); */
/* background-image: linear-gradient(to bottom,rgba(60, 60, 60, 0.33) 0,rgba(34, 34, 34, 0.32) 100%);*/
background-image: url('../images/navbarbg.png');
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border-radius: 4px;
}
.navbar-inverse {
/*
background-color: rgba(34,34,34,.33);
border-color: rgba(8,8,8,.40);
*/
background-color: transparent;
border-color: transparent;
}
ul li:not(:last-child) {
border-right: 0.3px solid white;
}
.jumbotron {
border: 1px solid;
border-color: #222222;
background-position: top left;
background-color: transparent;
background-attachment: fixed;
background-image: url('../images/navbarbg.png');
color: #cccccc;
}
.thumbnail {
width: 312px;
}
.thumbnail>img {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
img {
height: auto;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/catalog/">GCSS</a>
<small class="logo-abbr">Global Combat Support System</small>
</div>
<!-- End Brand and toggle -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav vdivide">
<li class="divide">
<a href="index.php">Home</a>
</li>
<li class="divide">
<a href="index.php">Home</a>
</li>
<!--
<li>
<a href="#">Link2</a>
</li>
-->
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
-->
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- /.container -->
</div>
<!-- ./navbar -->
<div class="container-fluid">
<div class="row">
<!-- side menu -->
<div class="col-md-3">
<!-- menu -->
<div id="MainMenu">
<div class="list-group panel panel-sidemenu">
<a href="#" class="list-group-item" data-parent="#MainMenu">Item 1</a>
<a href="#" class="list-group-item" data-parent="#MainMenu">Item 2</a>
<a href="#subitem1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 3 <i class="fa fa-caret-down"></i></a>
<div class="collapse" id="subitem1">
<a href="#SubMenu1" class="list-group-item list-group-subitem" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu1">
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 1 a</a>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 2 b</a>
<a href="#SubSubMenu1" class="list-group-item list-group-subitem" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubSubMenu1">Sub sub item 1</a>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubSubMenu1">Sub sub item 2</a>
</div>
<a href="#" class="list-group-item list-group-subitem" data-parent="#SubMenu1">Subitem 4 d</a>
</div>
<a href="javascript:;" class="list-group-item list-group-subitem">Subitem 2</a>
<a href="javascript:;" class="list-group-item list-group-subitem">Subitem 3</a>
</div>
<a href="#subitem2" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4 <i class="fa fa-caret-down"></i></a>
<div class="collapse" id="subitem2">
<a href="" class="list-group-item list-group-subitem">Subitem 1</a>
<a href="" class="list-group-item list-group-subitem">Subitem 2</a>
<a href="" class="list-group-item list-group-subitem">Subitem 3</a>
</div>
</div>
</div>
<!-- end menu -->
</div>
<!-- end side menu -->
<!-- sub container -->
<div class="col-md-9">
<!-- jumbotron -->
<div class="row">
<div class="col-md-8">
<div class="jumbotron">
<h1>Test</h1>
<p>Data go here</p>
<p><a class="btn btn-primary btn-lg" href="#">Read More</a>
</p>
</div>
<!-- end jumbotron -->
</div>
<!-- end col-md-8 -->
</div>
<!-- end row -->
<!-- end jumbotron -->
<!-- thumbnails -->
<div class="row auto-clear">
<div class="col-lg-4">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span>
</p>
</div>
</div>
</div>
<!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span>
</p>
</div>
</div>
</div>
<!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span>
</p>
</div>
</div>
</div>
<!-- end thumbnail -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="holder.js/300x200">
<div class="caption">
<h3>Item Name</h3>
<p>Description</p>
<p><span class="btn btn-success" role="button">View</span> <span class="btn btn-primary" role="button">Add to cart</span>
</p>
</div>
</div>
</div>
<!-- end thumbnail -->
</div>
</div>
<!-- end row -->
</div>
<!-- end sub container -->
</div>
</div>
答案 0 :(得分：1)
Bootstrap网格基于12个“虚拟”列。
指定col-lg-X时，X是您要用于列的虚拟列数。
因此，要有3列，每列需要使用4个虚拟列（= 12/3）。
在每个缩略图div上将col-lg-3替换为col-lg-4，它将起作用。有点。
您可以考虑不将这些列包装在col-lg-4（row auto-clear之后的div）中，但它太窄而不能包含300像素宽的缩略图。