更新时间:2023-02-25 17:29:12
您可以同时使用 pull-left
& pull-right
或 col-xs-6
,具体取决于您要实现的目标.
You can use both pull-left
& pull-right
or col-xs-6
, depending upon what exactly you want to achieve.
下面是jsfiddle链接后面的代码,显示了已完成的两件事:
Here's the code followed by jsfiddle link showing both things done:
body {
background-color: black;
}
#test-1 {
background-color: white;
height: 200px;
width: 200px;
}
#test-2 {
background-image: url("http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row-fluid">
<div id="test-1" class="span6 pull-left"></div>
<div id="test-2" class="span6 pull-right"></div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<div id="test-1" class="span6 col-xs-6"></div>
<div id="test-2" class="span6 col-xs-6"></div>
</div>
Jsfiddle链接: https://jsfiddle.net/jLfcpssz/
Jsfiddle link: https://jsfiddle.net/jLfcpssz/