我有以下四个内部div
容器(小图片-文本-小图片-文本):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
CSS
和components-circle
的{{1}}:
inner-component
问题是,当我调整浏览器大小时,.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
和components-circle
与它们右侧的文本重叠,这意味着模板没有响应。
调整浏览器大小或使inner-component
和components-circle
响应时,如何使其不与右侧的对应文本重叠,我该如何插入换行符?
答案 0 :(得分:2)
“ col-sm-12” div的内容是否与页面的内容或与重叠图像相邻的文本重叠? 无论如何,您可以通过使用“容器”或“行” div并添加用于页面大小调整的css来解决这两个问题。
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
@media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
答案 1 :(得分:1)
要创建隐藏在较大视口中的断点,可以将这些CSS类与换行符一起使用:
.d-md-none
使其在大于md
尺寸的屏幕上不可见。
.d-sm-none
要将其隐藏在尺寸大于sm
的屏幕上。
您可能还需要将row
放在container
内。
它是这样的:<br class="d-md-none">
如果您想在不使用<br>
元素的情况下换行,请签出this guide。
答案 2 :(得分:1)
您已经在使用行类,因此只需将width
的{{1}}设置为components-circle
(而不是使其变为静态)就可以了(因为引导程序将处理其余的响应内容)
要保持高宽比,您必须从100%
中删除height
并使用components-circle
。看看看看它是如何工作的。 (padding-top
的宽高比为1:1)
在全页视图中打开以下代码段,然后调整大小以查看效果:)
尽管还有其他方法可以达到相同目的,但IMO这是相当简单且可以理解的。
padding-top: 100%
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
更新:要在调整大小期间将内部图像保持在中心位置,必须将其位置设置为<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
(默认设置),然后在内部图像中添加0px 0px
-零件。这将缩放图像以适合父图像。请参阅上面的更新代码段!