个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在将盒子的大小与移动设备匹配时遇到了问题(使用 Bootstrap )我有 3 个盒子，1 号和 2 号是图片，3 号是文字，它看起来like this
当我将屏幕调整为移动尺寸时，会发生这种情况(框号 3 高于或在某些设备中比框号 2 短，如下所示:error
我需要它看起来像那样(3 号框与 2 号框高度相同):desired output
我尝试将最大高度和最小高度设置为 box3，但这不是解决方案，因为它不匹配所有设备。
html:
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 ">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 ">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 ">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</section>
这是有问题的框，框号 3:
<div class="yellow-box">
CSS:
.yellow-box{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
min-height: 204px;
margin-top:150px;
background-color: #e6ff00;
margin-left: -15px;
margin-right: -15px;
}
这是2号盒子:
.women-margin{
margin: -1px -15px -2px -17px;
position: relative;
display: block;
padding-right: 0;
}
最佳答案
<!DOCTYPE html>
<html lang="en">
<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>Example of Bootstrap 3 Nested Rows and Columns</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.main-content{
min-height: 330px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 150px;
margin-bottom: 30px;
background: #b4bac0;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-4">
<div class="main-content"></div>
</div>
<div class="col-xs-6 col-lg-4">
<!--Nested rows within a column-->
<div class="sidebar-content"></div></div>
<div class="col-xs-6 col-lg-4">
<div class="sidebar-content"></div>
</div>
</div>
</div>
</body>
</html>尝试此代码.. 了解更多信息 click here
关于html - 在较小的设备中，框高度不是所需的大小 - css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47286366/
25
4
0
是否可以告诉hive某个表“很小”，即应将其复制到所有节点并在RAM中进行操作？ 最佳答案 尝试以下提示: /*+ MAPJOIN(small_table) */ UPDATE 顺便说一句，还有其他
给定的是一个大(但不是巨大)的字符串数组(数量为 1000-5000 个单个字符串)。我想对这些字符串执行一些计算和其他操作。因为在处理那个大数组时它总是停止工作，所以我重写了我的函数以递归地获取较小
当我在大小为 (640,480) 的 JFrame 中添加 JPanel 时，JPanel 的大小为 (638449)。我需要 JPanel 与 JFrame 完全匹配! 我发现的一个临时解决方法是将
我目前正在尝试响应设计。我需要在父 div 变小的同时保持图像居中。 见图片说明: 我不想用它作为背景。下面的代码会一直把它放在div框的左上角 #img_wrap {
当我必须捕获生成器中可能发生的异常时，如何使 try block 尽可能小？ 典型的情况是这样的: for i in g(): process(i) 如果 g() 可以引发我需要捕获的异常，第一种
目前尝试让 Accordion 项目在 Bootstrap 中工作一切都很好，直到我尝试关闭所有 Accordion 菜单。突然之间，标题比未折叠时小得多。 当一个打开时 当全部关闭时 我正在使用指南
目前尝试让 Accordion 项目在 Bootstrap 中工作一切都很好，直到我尝试关闭所有 Accordion 菜单。突然之间，标题比未折叠时小得多。 当一个打开时 当全部关闭时 我正在使用指南
一个应用程序托管一个具有三个接口(interface)的 Web 服务，用于三个单独且独立的操作，所有这些操作都在应用程序的不同组件中实现，彼此独立，例如在不同的包等中，所以他们对彼此了解不多，只共享
我正在尝试使用 border-radius 属性设计一个主要内容容器具有圆 Angular 的网站。但是，我保持侧边栏和顶部导航栏固定，因此当用户向上或向下滚动时它们不会移动。它类似于在 Google
我正在构建我网站的响应式版本。 虽然我很高兴大多数 float 的 div 被迫在屏幕下方，但有一些 div 我需要保持彼此相邻，即使屏幕区域小于这些 div 的总宽度。在这种情况下，我想按比例缩小它
我正在为我的元素使用 Twitter Bootstraps 网格。我有以下 HTML: Some text Some text
我有一个小宽度的 div 并且可以看到溢出。我有一个更大的表，里面只有一个单元格和一个文本: A small text with spaces...
我有一个设计得很好的架构，其中 Controller 转到访问与数据库通信的存储库的服务。 因此， Controller 中的逻辑保持在最低限度，但我仍然有非常微妙的代码片段来执行一些任务，例如 验证
我在一个布局中有两个 View 。我将分别称它们为 View A 和 View B。 ┌──────┐ │┌─┐┌─┐│ ││A││B││ │└─┘└─┘│ └──────┘ 父布局(包括View A
整个页面的父元素是一个居中的 div，最大宽度限制为 960px。页面上的所有其他元素都是该父 div 的子元素。简化结构如下: 虽然父 div 的宽度不应超过 960px，但我
我应该链接到完整的 jQuery UI -还是-提供精简的自定义副本？ 来自 Google 等 CDN 的完整 jQuery-UI 与提供定制的最小版本之间存在非常显着的大小差异。此外，还可以将 jQ
我正在尝试制作一条图像拇指的“线”，它在鼠标移动时滚动。我让它工作了，但我现在的问题是我想在侧面做一个“填充”，这样我就不必将鼠标一直拉到侧面才能看到第一个/最后一个拇指。但我真的无法让它工作:/ 这
我是一名优秀的程序员,十分优秀！