- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我在使用 bootstrap v4 的网格系统时遇到了一点问题。我有一堆应该完全响应的列(4 个圆圈 -> 3 个圆圈 -> 2 个圆圈)。现在的问题是,在某些时候,当视口(viewport)宽度变成一定大小时,圆圈不再很好地堆叠起来。请参阅以下屏幕截图:
我的感觉是这与名称/标题的长度有关,但我不知道如何解决。
这是整个示例页面 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<style>
body {
color: #000; }
h3 {
font-size: 120%; }
h4 {
font-size: 120%;
padding-bottom: 15px;
line-height: normal; }
a {
color: #000;
text-decoration: none; }
a:hover {
color: #fc3f04;
text-decoration: none; }
.awp-team-title {
background-color: #efefef;
padding-top: 3em; }
.awp-team {
background-color: #efefef;
padding-bottom: 3em;
border-bottom: 1px solid #d9d2ca; }
.awp-team img.img-wt-margin {
padding-left: 35px;
padding-right: 35px;
margin-top: 50px; }
.awp-team .modal-title {
padding-bottom: 1em; }
.awp-team img.modal-img {
width: 80%; }
div.awp-team :hover > img {
opacity: 0.7; }
</style>
</head>
<body>
<div class="row awp-team-title">
<div class="col-xs-offset-1 col-xs-10
col-sm-offset-1 col-sm-10
col-md-offset-1 col-md-10
title">
<h3>This is a very long title containing a lot of information</h3>
</div>
</div>
<div class="row awp-team">
<div class='col-sm-offset-1 col-sm-10'>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#rdi-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='rdi-modal' tabindex='-1' role='dialog' aria-labelledby='rdiModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#ost-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='ost-modal' tabindex='-1' role='dialog' aria-labelledby='ostModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#mfi-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='mfi-modal' tabindex='-1' role='dialog' aria-labelledby='mfiModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#rku-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person with longer name </strong><br>Fake person with longer title</p>
</a>
</div>
<div class='modal fade' id='rku-modal' tabindex='-1' role='dialog' aria-labelledby='rkuModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person with longer name</h3>
<p>Fake person with longer title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#phe-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='phe-modal' tabindex='-1' role='dialog' aria-labelledby='pheModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#jja-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person with longer name </strong><br>Fake title with longer title</p>
</a>
</div>
<div class='modal fade' id='jja-modal' tabindex='-1' role='dialog' aria-labelledby='jjaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person with longer name</h3>
<p>Fake title with longer title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#gla-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='gla-modal' tabindex='-1' role='dialog' aria-labelledby='glaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#ega-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='ega-modal' tabindex='-1' role='dialog' aria-labelledby='egaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
感谢您的帮助!
最佳答案
原因是带有“name with longer title”的元素在较小的屏幕上有更高的高度。但它仍然试图漂浮其他元素,这就是它变成这样的原因。
一般来说,用类似的东西很容易修复
.person:nth-child(3n+1) { /* We pick first item of each row (3 in row) */
clear: left; /* Thanks buddy, no need to float me anymore*/
}
但是在你的情况下你有不可见的模态,所以它会是
.text-md-center:nth-child(6n+1) {
clear: left;
}
一旦你连续有 2 个元素,在媒体查询中重写它
.text-md-center:nth-child(4n+1) {
clear: left;
}
关于html - Bootstrap v4 中的响应式布局是将下一行推到右边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35498977/
我想要以下代码的 Python 单行解决方案,但是怎么做呢? total = 0 for ob in self.oblist: total += sum(v.amount for v in o
今天和大家一起学习一种可视化技术:构建树状热力图treemap。树形图易于可视化,且易于被人理解。树状图通过展示不同大小的矩形,以传达不同大小的数据量,一般认为,较大的矩形意味着占总体的一大部分,而较
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我有一个声明 $set eq "Y" ? $set = "N" : $set = "Y"; 但不管它总是设置为 "N" # Toggle setting if ($set eq "Y") { $
当我尝试在我的服务器上上传一个 php 文件时,我收到一条消息:"Parse error: ..." 我知道这是什么意思,但问题是别的。 如果我在本地服务器上编辑文件(我的计算机上安装了 XAMPP)
我是 python oneliner 循环的新手。 我希望用户将数据输入到二维列表中,同时提醒他他们将输入的数据索引。我的代码是: flag=0 x=[[int(input("enter the "+
尝试在变量之前和之后打印字符串。C 是否有能力使用一条语句来显示此输出? 这有效: float value = 5; printf("\nThe value of %f", value); print
我正在验证我创建的 MySQL 数据库的结果,为此,我需要一些屏幕截图。 例如,以下查询: select distinct run_ID from ngsRunStats_FK.failedRuns
有人可以解释一下这个 JS LINE 吗?数据是一个对象。 var list = data == null ? [] : (data.wine instanceof Array ? data.wine
如何在一行中添加三个下拉菜单。我想把我的日、月和年放在一行中,但不能这样做。任何帮助将不胜感激。我附上我的 jsfiddle . .... 最佳
我正在尝试使用 html 将 iframe 的高度设置为 100%(我已成功完成),但我还在顶部添加了一行额外的文本,所以它太高了 ~16px(这需要一个滚动条)。有没有办法更改 iframe 以显示
这是一个示例,我从文件中读取行作为字符串,以使整个文件作为字符串数组: String[] ArrayOfStrings = (new Scanner( new File("log.txt") ).us
我有一个包含大量定义的配置文件,用于在编译期间包含模块。此外,这意味着我必须经常检查代码内部的定义。每张支票需要 3 行,是否可以在一行中执行此操作。 #if FUNC_ENABLED functio
我正在尝试制作一个水平列表,其中每个 列表中的 s 的高度为 385px,宽度为 400px。 我尝试使用 inline-block 使列表水平排列,但这似乎不起作用。也就是说,我的意思是列表仍然是垂
这很烦人,我有一个带有 css 文件的 wordpress 主题,所有内容都在一长行中。我想知道为什么有人会那样做。现在我已经升级了,我需要将旧文件与新文件进行比较,以便我可以接受更改。 Meld、d
我有一个对象数组,其中每个对象都有一个 search_order 属性。我要检查数组并将所有对象的属性增加 1这是简单的方法: res = [] for r in array: r.searc
我在某些服务器上遇到许多具有相同内容和相同名称的文件。我需要隔离这些文件进行分析,所以我不能只删除重复项。操作系统为Linux(centos和ubuntu)。 我枚举文件名和位置并将它们放入文本文件中
你能在不抛出错误的情况下解决这个问题吗?答案是单线。这是来自一个死的职位发布,在回复中要求回答。我认为这是剔除受访者的聪明方法,但我似乎无法在不出错的情况下回答它。 显而易见的解决方案: f.moo(
这个问题在这里已经有了答案: Is it ok if I omit curly braces in Java? [closed] (16 个答案) 关闭 9 年前。 我在 java 中使用没有大括号
我在这里试图用 python 制作一个简单的计算器,我想知道是否可以在命令运行时将前 3 行合并为一行。我的意思是;我不必按 Enter 键来键入下一个数字/运算符,而是按空格键(在输入部分)。 wh
我是一名优秀的程序员,十分优秀!