如何使用bootstrap使我的网站看起来像这样?我希望在容器的两侧都有2个300px的侧边栏。中间栏我想在页面中间居中。
<!-- this is my middle column -->
<div class="container content profile">
<div class="row">
<!-- Begin Content -->
<div class="col-md-12">
</div>
</div> <!-- end row -->
</div>
答案 0 :(得分:0)
您可以查看以下链接。
<div class="row">
<div class="col-xs-2 "
style="height:600px;background:blue">
<h4> Left sidebar</h4>
</div>
<div class="col-xs-8 "
style="height:600px;background:yellow">
<h4 style="text-align:center;"> Content</h4>
</div>
<div class="col-xs-2 "
style="height:600px;background:green">
<h4> Right sidebar</h4>
</div>
</div>
答案 1 :(得分:0)
你可以尝试这样,希望它会帮助你。
.mid-col{
background: red;
}
.left-section{
width: 300px;
background: blue;
}
.right-section{
width: 300px;
background: green;
}
.profile .col-md-12.mid-col{
width: calc(100% - 600px);
}
@media only screen and (max-width: 989px) {
.profile .col-md-12.mid-col ,
.left-section,
.right-section{
width: 100%;
float: none !important;
margin-bottom: 5px;
}
}
<div class="container content profile">
<div class="row">
<!-- left section -->
<div class="left-section pull-left">
L
</div>
<!-- left section -->
<div class="col-md-12 mid-col">
M
</div>
<!-- right section -->
<div class="left-section pull-right">
R
</div>
<!-- right section -->
</div>
</div>