Grid Bootstrap中的大小相同？

时间：2016-02-13 20:19:31

标签： html css twitter-bootstrap

我正在尝试设置类似于文本框大小的图像大小框。我不确定我应该使用什么网格数我尝试了一些，但没有那么好。盒子间隔完美但是附近的图像位置很差。

enter image description here 

pdf-thumb-box {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden;
}

.pdf-thumb-box-overlay {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.pdf-thumb-box a {
  color: transparent;
}

.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.58);
  color: #fff;
  width: 100%;
  height: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.pdf-thumb-box-overlay span {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}


/**Cursor*/

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.secontainer {
  background-color: #E3F2FD;
}

.footercolour {
  background-color: #90CAF9;
}


/*material box*/

.box {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 25px;
  text-align: right;
  display: block;
  margin-top: 60px;
}

.box-icon span {
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.info h4 {
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.info > p {
  color: #717171;
  font-size: 16px;
  padding-top: 10px;
  text-align: justify;
}

.info > a {
  background-color: #03a9f4;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  transition: all 0.5s ease 0s;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">

        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">
        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>
  </div>
</div>
<br>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
              <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
              <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
              </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>


    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
          <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
          <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
          </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>

  </div>
</div>


<!-- Trigger the modal with a button -->


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is a large modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

如果你需要让你的图像覆盖父div的整个宽度，你需要给图像的宽度等于100％。

.yourImageClass{
   width: 100%
}

在您的代码中，bootstrap.css文件使max-width属性等于100％，因此它不会覆盖整个宽度。 检查一下：http://screencast.com/t/1cyEk0bf

答案 1 :(得分：1)

您可以使用

制作图片width: 100% 
.pdf-thumb-box img {
  width: 100%;
}

＆＃13;
＆＃13; 
.pdf-thumb-box img {
  width: 100%;
}

pdf-thumb-box {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden;
}

.pdf-thumb-box-overlay {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.pdf-thumb-box a {
  color: transparent;
}

.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.58);
  color: #fff;
  width: 95%;
  height: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.pdf-thumb-box-overlay span {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}


/**Cursor*/

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.secontainer {
  background-color: #E3F2FD;
}

.footercolour {
  background-color: #90CAF9;
}


/*material box*/

.box {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 25px;
  text-align: right;
  display: block;
  margin-top: 60px;
}

.box-icon span {
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.info h4 {
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.info > p {
  color: #717171;
  font-size: 16px;
  padding-top: 10px;
  text-align: justify;
}

.info > a {
  background-color: #03a9f4;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  transition: all 0.5s ease 0s;
}
＆＃13; 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">

        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="box">
        <div class="box-icon">
        </div>
        <div class="info">
          <h4 class="text-center">Title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>

        </div>
      </div>
    </div>
  </div>
</div>
<br>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
              <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
              <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
              </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>


    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="pdf-thumb-box">
        <a href="#2013-Katalog" data-toggle="modal" data-target="#myModal">
          <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg">
          <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
          <i class="fa fa-eye fa-stack-1x pdf-thumb-eye">hjkhkjh</i>
          </span></div>
          <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
        </a>

      </div>

    </div>

  </div>
</div>


<!-- Trigger the modal with a button -->


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is a large modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

通过css将图像加载到页面上。然后使用background-size css属性更改图像的大小。查看w3c文档。

相关问题
最新问题