jquery - 每列列出 3 个 Bootstrap 缩略图-6ren

jquery - 每列列出 3 个 Bootstrap 缩略图

转载作者：行者123 更新时间：2023-11-28 16:03:22

我试图通过使用数据库中的 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>