Question

我有3块数据。第一个网格尺寸为10，第二个尺寸为10，第三个尺寸为2.可以拉第三个网格20次，使其成为第一个网格？

起初就像

然后我希望结果像

    <!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
.a{
background:blue;
}
.b{
background:red;
}
.c{
background:green;
}
</style>
</head>
<body>
<div class="row">
<div class="c col-xs-12 col-sm-10">Graph</div>
<div class="b col-xs-12 col-sm-10">Meters</div>
<div class="a col-xs-12 col-sm-2">Buttons</div>


</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

我想在屏幕尺寸大于xs

之前将按钮放在图形之前

Answer 1

您需要使用两组不同的按钮。一个将放置在图形之前，仅在较大的xs屏幕中可见，一个将放置在图形之后，仅在xs屏幕中可见。

示例：

<div class="row">
    <div class="a col-xs-12 col-sm-2 hidden-xs">Buttons</div>
    <div class="c col-xs-12 col-sm-10">Graph</div>
    <div class="col-xs-12 col-sm-2 hidden-xs"></div>
    <div class="b col-xs-12 col-sm-10">Meters</div>
    <div class="a col-xs-12 col-sm-2 visible-xs">Buttons</div>
</div>

Working fiddle

Bootstrap推拉最大限制

1 个答案: