Sha*_*apa 2 html css twitter-bootstrap
我如何在 bootstrap 中实现这一目标？我有一个 3 列，并且希望在移动设备或桌面上保留 3 列。
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-6 col-sm-4">First</div>
<div class="col-xs-6 col-sm-4">Second</div>
<div class="col-xs-6 col-sm-4">Third</div>
</div>
</div>
在桌面上
First | Second | Third
在手机上就变成这样
First | Second
| Third
我想在桌面和移动设备上实现这一目标
First | Second | Third
这是小提琴 - > https://jsfiddle.net/y28ugzp6/
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>You can define it using md,sm and xs</p>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div>
</div>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
18335 次 |
| 最近记录： |