Question

original image

my attempt

大家好，

我正在尝试实现[原始图片]中显示的效果，其中“浏览集合”div和“请求手册”div与它们上面的四个项目对齐。

我试图通过使用bootstrap来实现这种效果，并且认为将元素放在bootstraps“container”类中会使所有内容都排成一行。我还没有设法让它工作，但右边没有排队。有人可以提出解决方案吗？下面是我的代码。谢谢！

body {

	font-family: 'Merriweather', serif;
	
}

/* content Area 2 */

	.contentarea2{
		background-color: #e3e2da;
		width: 100%;
		height: 585px;
		position: relative;
	}

	.squares{
		padding-top: 120px;
		position: relative;
		height: 100%;
	}
	
	.optionswrapper{
		width: 100%;
		height: 75px; 
		bottom: 0;
		position: absolute;
		color: orange;
	}
	
	.option1{
		width: 50%;
		height: 75px; 
		background-color: #2a2a2a;
		float: left;
	}
	
	.option2 {
		width: 50%;
		height: 75px; 
		background-color: #9b998f;
		float: right;
	}

/* buttons */

.collection {
	border-radius: 20px;
	background-color: Transparent;
	padding: 10px;
}

.collection:hover{
	border-radius: 20px;
	background-color: #3d3d3d;
	padding: 10px;

}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
}

/* animations */
   
.fade2 {
   opacity: 1;
   -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   }
   
      .fade2:hover {
      opacity: 0.5;
      }

.overlay-portfolio{
  padding: 25px;
  position: absolute;
  z-index:100;
  bottom: 15px;
  left: 5px;
  color: #FFFFFF;
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>container</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	
	<!-- Custom CSS -->
	<link href="custom.css" rel="stylesheet">
	
	<!-- fonts -->
	<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
 
 </head>
  <body>
	
	<div class="contentarea2">
	
		<div class="container squares">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
	
					<a href="#"><img class="img-responsive fade2" src="img/square1.jpg" alt="client 1"></a>
					
					<div class="overlay-portfolio">
					<h3>Modern</h3>
					</div>
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
					<a href="#"><img class="img-responsive fade2" src="img/square2.jpg" alt="client 1"></a>
					<div class="overlay-portfolio">
					<h3>Contemporary</h3>
					</div>
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
					<a href="#"><img class="img-responsive fade2" src="img/square3.jpg" alt="client 1"></a>
					<div class="overlay-portfolio">
					<h3>Minimalist</h3>
					</div>
				
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
					<a href="#"><img class="img-responsive fade2" src="img/square4.jpg" alt="client 1"></a>
					<div class="overlay-portfolio">
					<h3>Classic</h3>
					</div>
				
				</div>
			</div>
			
			<div class="optionswrapper">
			<div class="option1">
			</div>
			
			<div class="option2">
			</div>
			</div>
		</div>
	
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
  
  </html>

Answer 1

删除内联类＆＃39;从你的方块中添加课程row-same-height

并将行容器替换为allow(die).to receive(:roll).and_return(1, 2, 3)

应该把它们全部按比例分配。

Div没有在Bootstrap Container类中排队

1 个答案: