Question

无论我尝试使用平板电脑尺寸还是更小，我都无法将我的引导缩略图放在中心位置。一旦缩略图达到尺寸，它们就不再滚动以保持屏幕中心。我已经尝试了所有我能想到的内容，包括我的缩略图类和我的img响应类的HTML到文本 - algin中心和margin auto 0.没有任何变化。

这是我的HTML

<div class="portfolio">
    <div class="container">
  <a name="porty"></a>
      <h1 class="text-center" id = "port">My Work</h1>
      <div class="row">


        <div class="col-md-4">
          <div class="thumbnail ">
            <div class="caption">
              <h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <a href="http://codepen.io/kgoode517/full/WwjNqp/"><i class="fa fa-codepen fa-5x fa-fw" id="first"></i> </a>
            </div>
            <img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute">
          </div>
          <legend>Tribute page</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
              <a href="http://codepen.io/kgoode517/full/yYddbb/"><i class="fa fa-codepen fa-5x fa-fw" id ="second"></i> </a>
            </div>
            <img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google">
          </div>
          <legend>Google homepage</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
              <a href="http://codepen.io/kgoode517/full/LNdxKE/"><i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i> </a>
            </div>
            <img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon">
          </div>
          <legend>Cannon game</legend>
        </div>
      </div>

这是我的CSS

/*Portfolio*/

.portfolio {
background-color:#706C61;
  padding-top: 50px;
  padding-bottom: 100px;
  display: inline-block;
  width: 100%;
  height: 800px;
 position:relative;
}

.portfolio h1 {
  font-size: 65px;
  font-family: "Roboto",serif !important;
  color: #0d0d0d !important;
}

.row {
  padding-top: 100px;
}

.thumbnail {
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid black !important;
  border-radius: 5px !important;
}

.caption img {
  flex-shrink: 0;
  max-width 100%;
  max-height: 100%;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(128, 128, 128, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  font-family: "Montserrat",serif !important;
}

.caption a {
  text-decoration: none;
  color: white;
}

.caption h4 {
  position: relative;
  left: 5px;
  bottom: 10px;
  font-size: 25px;
}

.caption i:hover {
  color: orange !important;
}

legend {
  font-family: "Roboto",serif !important;
  border-bottom: none !important;
  color: #0d0d0d !important;
  font-size:22px; !important;
  height:200px;
}

#first {
  position: relative !important;
  bottom: -35px !important;
}

#second {
  position: relative !important;
  bottom: -35px !important;
}

#icon {
  position: relative;
  top: 30px;
}



@media screen and (min-width:767px) and (max-width:1199px) {
  #first {
    position: relative;
    bottom: 20px;
  }
  #icon {
    top: 50px !important;
  }
  .caption h4 {
    font-size: 20px;
  }
}

@media screen and (min-width:767px) and (max-width:991px) {
  #first {
    position: relative;
    top: 50px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
  .caption i {
    position: relative;
    top: 50px;
  }
  #icon {
    position: relative;
    top: 65px !important;
  }
  .caption .fa {
    font-size: 50px;
  }
}




@media screen and (max-width: 1200px) {
  .portfolio h1 {
    font-size: 55px;
  }
}


@media screen and (max-width: 991px){
    .thumbnail {
    height: 369px;
    width: 440px;
    position: relative;
    right: -142px;
    bottom: 48px;
}

.portfolio{
height: 2650px;
}

#profile li {
    position: relative;
    left: 60px;
}
.caption h4 {
    font-size: px !important;
}
.caption .fa {
    font-size: 80px !important;

}

legend {
    height: 80px;
    position: relative;
    left: 139px;
    bottom: 53px;
}
}

@media screen and (max-width: 965px) {
  .portfolio {
    margin-top: -150px !important;
  }
}

@media screen and (max-width:767px) {
  #first {
    position: relative;
    top: 25px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
 #port{
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: -1285px;
    left: 0;
    bottom: 0;
    right: 0;
}

.thumbnail {
    position: relative;
    bottom: 0px;
}
legend
{
    position: relative;
    bottom: 13px;
}
}

@media screen and (max-width: 454px){
  .caption h4{
  font-size:25px;
  }
  #first{
   top:15px;
  }
  #second{
   top:15px;
  }
}



@media screen and (max-width:400px) {
  #icon {
    position: relative;
    bottom: 20px;
  }
}

@media screen and (max-width:397px) {
  #icon {
    position: relative;
    top: 0px;
  }
}
@media screen and (max-width:390px) {
  #first{
  top:5px;
  }
  }
@media screen and (max-width:325px) {
  .caption .fa {
  font-size:60px;
  }
  }
@media screen and (max-width:307px) {
  #first{
   top:-5px; 
  }
  }

/*End Portfolio*/

Here is the website

最后这里是我正在体验任何帮助的屏幕截图，非常感谢谢谢！

Answer 1

您的固定导航栏的宽度大于较低的分辨率，当您放弃分辨率时，右侧的空白区域很多。我建议您按照这个基本的bootstrap负责模板开始开发您的网站。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Bare - Start Bootstrap Template</title>
    <!-- Custom CSS -->
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Services</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>
    <!-- Page Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h1>A Bootstrap Starter Template</h1>
          <p class="lead">Complete with pre-defined file paths that you won't have to change!!</p>
          <ul class="list-unstyled">
            <li>Bootstrap v3.3.7</li>
            <li>jQuery v1.11.1</li>
          </ul>
        </div>
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </body>

</html>

将您的网站重新定位到.container内并链接您的风格并继续......我希望它能帮助您更好地理解引导程序的概念，在您完全堆栈之后我无法为您完成整个工作开发商。

Answer 2

您应该在不同的屏幕尺寸中包含Bootstrap的“指令”，而不是仅使用class =“col-md-4”。使用class =“col-xs-12 col-sm-6 col-md-4”这样的多个类可以调整各种屏幕尺寸的列数，从而可以轻松地使每列的内容居中，并且只需使用图像上的“img-responsive”类，因此它们将始终适合它们所在的列。然后，当屏幕尺寸较小时，将显示较少的列，但列的内容保持不变并保持在列的中心。如果你想在屏幕上居中而不填充屏幕的宽度（比如使用col-xs-10，所以它不会填充12 col的宽度），那么使用col-x-offset-x类来在div显示的位置左侧创建一个“空白”列。您可以根据需要使用屏幕尺寸和偏移的组合。网格使您可以非常轻松地获得不同尺寸的对齐，而无需使用CSS来定义边距和诸如此类的精确像素。一旦你开始使用“其他指令”覆盖CSS，就高度/宽度而言，事情会变得愚蠢......

Bootstrap缩略图忽略居中css

2 个答案: