html - Div 未在 Bootstrap 容器类中排列-6ren

html - Div 未在 Bootstrap 容器类中排列

转载作者：行者123 更新时间：2023-11-28 07:55:32

24

4

original image

my attempt

大家好，

我正在尝试实现 [原始图像] 中显示的效果，其中“浏览收藏”div 和“请求手册”div 与它们上方的四个元素对齐。

我正在尝试通过使用 bootstrap 来实现这种效果，并认为将元素放入 bootstraps“容器”类将使一切都对齐。不过，我还没有设法让它工作，而且右侧没有对齐。有人可以提出解决方案吗？下面是我的代码。谢谢!

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>

最佳答案

从方 block 中删除内联类并添加类 col-xs-height col-top

并将行容器替换为 row-same-height

这应该使它们成比例。

关于html - Div 未在 Bootstrap 容器类中排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30132695/

24

4

0

文章推荐： ios - UITableViewCell 未显示在 TableView 中

文章推荐： c++ - Visual C++ 2008 发布版本打破了我的花车

文章推荐： javascript - JQuery Mobile Canvas 字段(签名)样式问题

文章推荐： json - Swift JSONDecoder typeMismatch 错误

F# 排列
我需要在给定的列表上生成排列。我设法这样做 let rec Permute (final, arr) = if List.length arr > 0 then for x i
Java 排列
我正在尝试运行我的代码，以便它打印循环排列，尽管我目前只能让它执行第一个排列。它正确运行到我标记的点，但我看不出出了什么问题。我认为 while 循环中没有中断，但我不确定。确实需要一些帮助。 pac
JavaScript 排列
我正在尝试计算不包含连续字母的排列数。我的代码通过了像“aabb”(答案:8)和“aab”(答案:2)这样的测试，但没有通过像“abcdefa”这样的情况(我的答案:2520；正确答案:3600)。这
【排列】（笛卡尔树上dp？）
比赛在这 B.排列前言：笛卡尔树上 dp？这名字很妙啊，但其实不需要笛卡尔树，只不过利用了笛卡尔树的定义一个性质：我们设一个区间 \([l,r]\) 中的最大值的位置为 \(pos\)，
r - 使用条件对字符列进行排序/排列
我正在尝试使用 dplyr 的 arrange 根据条件对字符串进行排序。我想在一列上排列，但如果第二列等于一个值，则按升序排列，如果第二列等于另一个值，则按降序排列。我发现了几个类似的问题(其中一
r - 排列()不识别列名参数
在 R 中，我使用 dplyr更具体地说 arrange() . 不知何故 arrange功能没有按预期工作。在下面的示例中，我首先存储列的名称，然后将此变量作为参数传递给名为“my_functio
qml - GridLayout 排列
以下是我的 main.qml : Window { id: window visible: true width: 800 height: 480 title:
javascript - 找到两个数组的可用组合(排列？)
很难用谷歌搜索这个问题，因为我不确定这些概念叫什么，并且所有“两个数组/组的组合”SO 帖子都没有给我我期望的输出。数组示例: var array1 = ['Bob', 'Tina']; var a
使用两个列表的 Scala 排列
实现以下目标的最佳方法是什么？我有两个列表: val l1 = List("a", "b") val l2 = List(1, 2) 我想生成这个: List ( List(('a', 1)
使用递归的 JavaScript 排列
我知道互联网上有很多针对我的具体问题的解决方案，但我一直在尝试以特定的方式解决它，但它不起作用，我真的无法理解出了什么问题。就我而言，我只想打印排列。这是我的代码: a = "abc"; functi
具有输出列表长度的 Haskell 排列
我有这样的代码来创建排列: --unique permutation perm :: [t] -> [[t]] perm [] = [[]] perm (x:xs) = [(y:zs) | (y,ys
math - 如何高效找到nPr(排列)？
有没有比使用基本公式 n!/(n-r)! 更好的方法？就像我们对 nCr(组合) nCr = (n-l)Cr + (n-1)C(r-1) 一样？最佳答案这样怎么样:nPr = (n−1)Pr +
r - 来自不同集合的混合组合/排列
此问答的动机是 How to build permutation with some conditions in R . 到目前为止，已经有一些很好的 R 软件包，例如 RcppAlgos 和 arr
Erlang 列表理解、排列
我正在修改一本书中的排列示例。以下代码按预期工作。 perms([]) -> [[]]; perms(L) -> [[H|T] || H []; 它返回一个空列表。当我替换时，我得到了这个。
Java 排列 2
大约一周前，我问了一个关于帮助我解决这个问题的问题 Java permutations ，打印排列方法有问题。我已经整理了我的代码，并有一个现在可以工作的工作示例，尽管如果 5 位于数组中的第五个位置
python - 如何计算具有重复元素的列表的排列(排列)
我有一个包含重复元素的列表，即orig = [1,1,1,2,2,3]。我想创建一个derangement b = f(orig)，使得 b 中的每个位置值都与 orig 中的值不同: b[i] !
具有最少随机数的 Java 排列
我想生成一个 array a 的排列而且我不想使用实用功能，例如 java.util.Collections() . 排列应该是随机的，并且每个排列都应该有可能发生 - 但不需要均等分布的概率。以下
java - 排列、递归
我有一个作业:用户输入一个字符串，例如 ABCD，程序必须给出所有排列。我不希望整个代码只是一个提示。这是我到目前为止在他们那里得到的，我没有得到任何实现。以ABCD为例: 在本例中获取字符串长度的
Python Itertools 排列
我目前正在编写一个使用 itertools 的程序，其中的一部分似乎无法正常运行。我希望确定排列函数输出列表长度的输入等于它生成输出的列表长度。换句话说，我有 import itertools b =
python - Itertools 排列
我有一个列表 x=[1,2,3,4,5] 并且想查看这个列表的不同排列，一次取两个数字。 x=[1,2,3,4,5] from itertools import permutations y=list

首页

博学

6Ren·AI

商城

html - Div 未在 Bootstrap 容器类中排列