为引导程序列提供更多高度<768像素

时间:2018-08-01 17:45:42

标签: html css twitter-bootstrap

我使用引导程序3创建了4列。每列都是400x220px。当视口命中300x350px时,我会做任何使列< 768px变大的事情。我不知道执行此操作的方法,而且我可以看到Bootstrap无法执行此操作。

我可以使用html5 <picture>标签。但是我看不到可以将其与Bootstrap 3网格集成,在我看来这不是一个好的解决方案。

有人对我该怎么做有另一个想法,还是不可能?

A demo of the columns is here

  background-color: #f5f5f5;
    }
    /* Set width between grid elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    } 
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    .margin_bottom {
      margin-bottom: 10px;
    }
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .img-responsive { 
        height: 100%;
    }
    /* Position of buttons/text in a single grid element */
    .inner-wrapper {
      text-align: center;
      background: none;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }

    .bottom-left {
        position: absolute;

        bottom: 8px;
        left: 16px;
    }
    /* Color on text */
    .dark-font {
      color: #333;
    }
    .light-font {
      color: #fff;
    }
   
    /* Set full width on columns */
    @media (max-width: 768px) {
      .img-responsive {
        width: 100%;
        }
      .btn-success {
        width: fit-content;
      }

    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
	<div class="container-fluid">
		<div class="row">
	        <div class="col-xs-6 col-sm-3 margin_bottom">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-left">
	            	<h3>Here is headline 1</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-left">
	                <h3>Here is headline 2</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-right">
	                <h3>Here is headline 3</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-right">
	                <h3>Here is headline 4</h3>
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

在您的容器中添加一个类,使其具有高度...我想这就是您要的。如果没有,让我知道!

  background-color: #f5f5f5;
    }
    /* Set width between grid elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    } 
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    .margin_bottom {
      margin-bottom: 10px;
    }
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .img-responsive { 
        height: 100%;
    }
    /* Position of buttons/text in a single grid element */
    .inner-wrapper {
      text-align: center;
      background: none;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }

    .bottom-left {
        position: absolute;

        bottom: 8px;
        left: 16px;
    }
    /* Color on text */
    .dark-font {
      color: #333;
    }
    .light-font {
      color: #fff;
    }
   
    /* Set full width on columns */
    @media (max-width: 768px) {
      .img-responsive { /*EDIT*/
        width: 100%;
        height: auto;
        }
      .btn-success {
        width: fit-content;
      }
      /* Here you go */
      .height-m {
        height: 350px;
      }

    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
	<div class="container-fluid">
		<div class="row">
	        <div class="col-xs-6 col-sm-3 margin_bottom height-m">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-left">
	            	<h3>Here is headline 1</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom height-m">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-left">
	                <h3>Here is headline 2</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom height-m">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-right">
	                <h3>Here is headline 3</h3>
	            </div>
	        </div>
	        <div class="col-xs-6 col-sm-3 margin_bottom height-m">
	            <img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
	            <div class="inner-wrapper bottom-right">
	                <h3>Here is headline 4</h3>
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>