通过使用Bootstrap,我正在尝试在其右侧创建3行图像和文本。如果使用移动(小型)设备进行浏览,我希望每行只有一个图像,右侧有文本。图像可以是不同的大小,但我希望它们以相同的大小显示(现在是内联样式)。 目前它在大型设备上看起来还不错,但是当缩小视口时,包装就会关闭。而不是所有的列在一个点上彼此相遇,他们错误地包装。如果我删除图像上的“向左拉”,它们会正确包装,但文本会在图像下方。我怎样才能在这里做我想做的事?
我当前的HTML:
<div class="row">
<div class="col-sm-4">
<img src="http://lorempixel.com/300/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 1</h3>
<p>Text 1 is cool text</p>
</div>
<div class="col-sm-4">
<img src="http://lorempixel.com/400/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 2</h3>
<p>Text 2 is also cool text</p>
</div>
<div class="col-sm-4">
<img src="http://lorempixel.com/800/800/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 3</h3>
<p>Text 3 is also very cool text</p>
</div>
</div>
答案 0 :(得分:0)
这是你要找的吗?
<div class="row">
<div class="col-md-4 col-sm-12">
<img src="http://lorempixel.com/300/200/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
<div class="col-sm-6">
<h3>Header 1</h3>
<p>Text 1 is cool text</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<img src="http://lorempixel.com/400/200/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
<div class="col-sm-6">
<h3>Header 2</h3>
<p>Text 2 is also cool text</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<img src="http://lorempixel.com/800/800/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
<div class="col-sm-6">
<h3>Header 3</h3>
<p>Text 3 is also very cool text</p>
</div>
</div>
</div>
答案 1 :(得分:0)
似乎我必须将我的列包装在另一个类clearfix:
中<canvas id="chart-area-service_hours"></canvas>
<button class="button btn btn-md btn-block btn-default" id="update-
statistic" style="width: 50%;margin: 0 auto;">Обнавить</button>
var randomHours = function() {
return Math.round(Math.random() * 12);
};
var service_hours = {
type: 'pie',
data: {
datasets: [{
data: [
{% for service in current_user.services %}
[
randomHours(),
],
{% endfor %}
],
backgroundColor: [
{% for service in current_user.services %}
'#00FFFF',
window.chartColors.purple,
'#ff9900',
window.chartColors.grey,
window.chartColors.brown,
// window.chartColors.green,
// window.chartColors.yellow,
// window.chartColors.purple,
{% endfor %}
],
label: 'Распределение рабочих часов по услугам'
}],
labels: [
{% for service in current_user.services %}
"{{service.title}}",
{% endfor %}
]
},
options: {
responsive: true,
}
};
var ctx = document.getElementById("chart-area-service_hours").getContext("2d");
window.myPie = new Chart(ctx, service_hours);
document.getElementById('update-statistic').addEventListener('click', function() {
all_brnoi_line.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
$("#chart-area-1").hide().html('<canvas id="chart-area-1" class="all-broni">').fadeIn('fast');
window.myPie.update();
});
答案 2 :(得分:0)
如果您不是在寻找引导列断点并仍在寻找一些东西,请尝试使用引导媒体断点。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-4 row1" >
<img src="http://lorempixel.com/300/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 1</h3>
<p>Text 1 is cool text</p>
</div>
<div class="col-sm-4 row2">
<img src="http://lorempixel.com/400/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 2</h3>
<p>Text 2 is also cool text</p>
</div>
<div class="col-sm-4 row3">
<img src="http://lorempixel.com/800/800/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
<h3>Header 3</h3>
<p>Text 3 is also very cool text</p>
</div>
</div>
</body>
</html>
CSS使用媒体断点:
使用max-width
<style type="text/css">
/* Extra Small Devices, Phones */
@media only screen and (max-width : 768px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: black;
}
.row2{
display: none;
}
.row3{
display:none;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 992px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: blue;
}
.row3{
display:none;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 1200px) {
/* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
body{
background-color: green;
}
}
/* Large Devices, Wide Screens
USE DEFAULT
*/
</style>
使用min-width
<style type="text/css">
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: black;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: blue;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
/* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
body{
background-color: green;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
/* YOUR CODE HERE*/
}
</style>