<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 main-container">
<h1>Welcome</h1>
<hr>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<img class="pull-left" src="http://placehold.it/32x32"/>
</div>
<div class="col-sm-4">
<h3>Capture Everything.</h3>
<p>Save all your data, data are significant and crucial.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-4">2</div>
</div>
<div class="row">
<div class="col-sm-2">3</div>
<div class="col-sm-4">3</div>
</div>
</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</body>
</html>
以下是工作链接: http://jsbin.com/kojorike/1/edit
如何使用image in left column and text in right column
创建类似下面的内容?
答案 0 :(得分:0)
在bootstrap中,每个class="row"
由 12个列组成。
意思是你必须使用它们。
示例:
<div class="row">
<p class="col-md-8">text text text</p>
<img src="/image.jpg" class="col-md-4" />
</div>
请注意。您可以使用class="col-md-offset-5"
在前一个元素之间添加间距。