Question

如何使用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>

http://i.stack.imgur.com/irIrU.jpg

Answer 1

您可以查看以下链接。

Updated fiddle

 <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>

Answer 2

你可以尝试这样，希望它会帮助你。

.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>

2个带有中间col-md居中引导的侧边栏

2 个答案: