html - 2 个带有中间 col-md 居中 Bootstrap 的侧边栏

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

你可以这样试试，希望对你有帮助。

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