在网格系统之外移动元素
Moving element outside of grid system
我正在用 bootstrap 开发一个 tumblr 主题,我想在 header 旁边为用户的个人资料图片留出一个不错的大区域。这里的问题是,bootstrap 的网格格式非常紧凑,我看不到任何我想要的空间:
看到那个红色的东西了吗?我想将它移动到蓝色箭头所指的位置。我试过扩展容器,将红色圆圈设置为向左浮动,并给它 margin-bottom:100%,但这将所有内容都推到了页面之外。
这是我的 css 和 HTML 供参考,有问题的项目标有 class "talkbubble":
CSS
//Media Queries
@media (min-width: 1200px){
.container {
width: 800px;
}
}
@media (min-width: 992px){
.container {
width: 800px;
}
}
//Header Edits
.jumbotron{
margin-bottom: 0px;
h1{
color: red;
}
}
//upsidedown tab edits
.tab-content{
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:-33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:67px;
}
//square gallery
.square{
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
//iconbubble
.talkbubble {
width: 120px;
height: 120px;
background: red;
position: absolute;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/app.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap/tab.js"></script>
<script src="js/jquery.fakecrop.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-pinterest-extension-installed="cr1.39.1">
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<script>
$(document).ready(function () {
// for a filled square thumbnail
$('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
});
</script>
<div class="row marketing">
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>
</html>
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the margin edge of the element and the edge of its containing block.
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
您可以将此属性直接应用于气泡而不是 before:
伪元素。
在 CSS 中使用 /* */
而不是 //
进行评论。例如:
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
}
请检查结果:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Media Queries */
@media (min-width: 1200px) {
.container {
width: 800px;
}
}
@media (min-width: 992px) {
.container {
width: 800px;
}
}
/* Header Edits */
.jumbotron {
margin-bottom: 0px;
h1 {
color: red;
}
}
/* upsidedown tab edits */
.tab-content {
padding: 10px;
border: 1px solid #ddd;
border-bottom: 0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: -33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: 67px;
}
/* square gallery */
.square {
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
width: 120px;
height: 120px;
background: red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<div class="row marketing">
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
诀窍是这样的:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...your image markup here...
</div>
<div class="col-md-9">
...
</div>
</div>
我从 md
开始就设置成这样了。您可能希望对宽度较低的图像列使用 hidden-*
,因为从设计的角度来看,您所做的事情在移动宽度下看起来很奇怪。
我正在用 bootstrap 开发一个 tumblr 主题,我想在 header 旁边为用户的个人资料图片留出一个不错的大区域。这里的问题是,bootstrap 的网格格式非常紧凑,我看不到任何我想要的空间:
看到那个红色的东西了吗?我想将它移动到蓝色箭头所指的位置。我试过扩展容器,将红色圆圈设置为向左浮动,并给它 margin-bottom:100%,但这将所有内容都推到了页面之外。
这是我的 css 和 HTML 供参考,有问题的项目标有 class "talkbubble":
CSS
//Media Queries
@media (min-width: 1200px){
.container {
width: 800px;
}
}
@media (min-width: 992px){
.container {
width: 800px;
}
}
//Header Edits
.jumbotron{
margin-bottom: 0px;
h1{
color: red;
}
}
//upsidedown tab edits
.tab-content{
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:-33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:67px;
}
//square gallery
.square{
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
//iconbubble
.talkbubble {
width: 120px;
height: 120px;
background: red;
position: absolute;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/app.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap/tab.js"></script>
<script src="js/jquery.fakecrop.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-pinterest-extension-installed="cr1.39.1">
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<script>
$(document).ready(function () {
// for a filled square thumbnail
$('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
});
</script>
<div class="row marketing">
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>
</html>
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the margin edge of the element and the edge of its containing block.
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
您可以将此属性直接应用于气泡而不是
before:
伪元素。在 CSS 中使用
/* */
而不是//
进行评论。例如:
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
}
请检查结果:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Media Queries */
@media (min-width: 1200px) {
.container {
width: 800px;
}
}
@media (min-width: 992px) {
.container {
width: 800px;
}
}
/* Header Edits */
.jumbotron {
margin-bottom: 0px;
h1 {
color: red;
}
}
/* upsidedown tab edits */
.tab-content {
padding: 10px;
border: 1px solid #ddd;
border-bottom: 0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: -33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: 67px;
}
/* square gallery */
.square {
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
width: 120px;
height: 120px;
background: red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
<li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<div class="row marketing">
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>
</div>
<div class="col-sm-4">
<a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
诀窍是这样的:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...your image markup here...
</div>
<div class="col-md-9">
...
</div>
</div>
我从 md
开始就设置成这样了。您可能希望对宽度较低的图像列使用 hidden-*
,因为从设计的角度来看,您所做的事情在移动宽度下看起来很奇怪。