使用boostrap Grid系统堆叠

时间:2018-09-19 17:40:49

标签: html css twitter-bootstrap

我正在使用Bootstrap构建标头。我正在尝试将台式机版本扩展到整个12个网格,如下所示:

enter image description here

然后在电话上,我想将两个堆栈如下所示:

enter image description here

到目前为止,这是我一直试图通过自举完成的方式,但是我运气不佳:感谢您提供任何反馈或建议!

 <div class="container-fluid">
   <div class="background row">

   <div class="col-lg-1 col-xs-12">
   <p class="text-center">gb</p>
   </div>

    <div class="col-lg-1 col-xs-12">
   <p class="text-center">us</p>
   </div>

   <div class="col-lg-6 col-xs-12">
   <p class="text-center announce-something-h">ANNOUNCE SOMETHING HERE</p>
   </div>

   <div class="col-lg-4 col-xs-12">
   <p class="text-center announce-something-h">UK</p>
   </div>

1 个答案:

答案 0 :(得分:-1)

只需使用浮点数和媒体查询:

.header{
  background-color:grey;
  overflow:hidden;
}
.header__left, .header__right, .header__message{
  padding:10px;
}
.header__left{
  float:left;
}
.header__right{
  float:right;
}
.header__message{
  text-align:center;
  background-color:red;
}

@media(max-width:767px){
  .header__message{
    clear:both;
  }
}

<header class="header">
  <div class="header__left">
    <a href="#" class="header__button">GB</a>
    <a href="" class="header__button">USD</a>
  </div>
  <div class="header__right">
    <a href="#" class="header__country-select">UK</a>
  </div>
  <div class="header__message">Announce Something here</div>
</header>

实时示例:

https://codepen.io/anon/pen/PdXBZR