html - 在 Grid Bootstrap 中大小相同？

标签 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>

最佳答案

您可以使图像 width: 100% 使用

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


.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;
}
<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>

关于html - 在 Grid Bootstrap 中大小相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35384867/

上一篇：html - 在 Bootstrap 的列表组中对齐内容(垂直和水平)

下一篇：css - 覆盖 "table tr:nth-child(even/odd) td {}"

相关文章：

javascript - 在另一个模态之上打开一个 bootbox 模态不会使后面的模态变暗

javascript - HTML 表单，如果选择了一种 radio 条件，则强制输入

javascript - 如何通过容器内的元素定义容器的高度

javascript - 为什么这个 $_GET 在 GET 提交表单后为空，为什么在表单提交时附加 "?"到 URL

javascript - HTML 文件未在 Django 中正确加载

php - 如何将 CSS 应用于 Facebook 登录按钮

javascript - 输入搜索在 Edge、IE 或 Firefox 中不起作用

css - 这个 CSS 代码是否正确？

html - 如何使用 CSS 将三列居中对齐？

c# - Bootstrap Datatables JSON 类解析

©2024 IT工具网  联系我们