使用bootstrap

时间：2015-04-23 08:08:17

标签： html css twitter-bootstrap responsive-design

我尝试使用bootstrap构建2列响应式布局。 这是相关代码

<div class="content">
        <div class="container-fluid">
            <div class="row">
                <span id="campaign-description-section"
                     class="section campaign-description-section 
                     col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6">
                    Campaign Description Section
                </span>
                <span id="shirt-styles-section"
                     class="section shirt-styles-section 
                     col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6">
                    Shirt Styles Section
                </span>
                <span id="color-size-section"
                     class="section color-size-section 
                     col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
                    Color Size Section
                </span>
                <span id="price-section"
                     class="section price-section
                     col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
                    Price Section
                </span>
                <span id="attention-banner"
                     class="section attention-banner
                     col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
                    Attention Banner Section
                </span>
            </div>
        </div>
        <div class="container-fluid">
            <div id="quality-section" class="section quality-section row">Quality Section</div>
        </div>
        <div class="container-fluid">
            <div id="designers-section" class="section designers-section row">Designers Section</div>
        </div>
        <div class="container-fluid">
            <div id="footer" class="section footer row">Footer</div>
        </div>
    </div>

我想要的是 enter image description here

即时通讯 enter image description here

关于移动布局我正在努力争取这是什么 enter image description here

这是code pen

3 个答案:

答案 0 :(得分：2)

＆＃13;
＆＃13; 
.section {
  border-color: red;
  border-style: solid;
}
.color-size-section {
  background-color: darkviolet;
  height: 200px;
}
.campaign-description-section {
  height: 200px;
}
.price-section {
  background-color: aqua;
}
.shirt-styles-section {
  background-color: lightgray;
  color: red;
  height: 500px;
}
.attention-banner {
  background-color: green;
}
.quality-section {
  background-color: lawngreen;
}
.designers-section {
  background-color: yellowgreen;
}
.footer {
  background-color: black;
}
＆＃13; 
<html class="">

<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <link rel="canonical" href="http://codepen.io/anon/pen/EjxQjP">

  <link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>
  <!--#region Header Section-->
  <div class="">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">

          </a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="">Explore</a>
          </li>
          <li><a href="">Design</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!--#endregion Header Sections-->
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div>
          <div id="shirt-styles-section" class="section shirt-styles-section 
                         col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6" style='right:0%;  margin-bottom: 46px;'>
            Shirt Styles Section
          </div>
          <div id="campaign-description-section" class="section campaign-description-section 
                         col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6" style='left:0%'>
            Campaign Description Section
          </div>


          <div id="color-size-section" class="section color-size-section 
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6" style='left:0%'>
            Color Size Section
          </div>
        </div>
        <div id="price-section" class="section price-section
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
          Price Section
        </div>
        <div id="attention-banner" class="section attention-banner
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
          Attention Banner Section
        </div>

      </div>
      <div class="container-fluid">
        <div id="quality-section" class="section quality-section row">Quality Section</div>
      </div>
      <div class="container-fluid">
        <div id="designers-section" class="section designers-section row">Designers Section</div>
      </div>
      <div class="container-fluid">
        <div id="footer" class="section footer row">Footer</div>
      </div>
    </div>

    <script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

试试这个

答案 1 :(得分：1)

我希望重新考虑HTML标记的结构更清晰。

我将您的代码分叉以显示my example 

 <div class="left-side col-md-6 col-sm-12">
    <div id="shirt-styles-section" class="section shirt-styles-section">
        Shirt Styles Section
    </div>
</div>
<div class="right-side col-md-6 col-sm-12">
    <div id="campaign-description-section" class="section campaign-description-section">
        Campaign Description Section
    </div>
    <div id="color-size-section" class="section color-size-section">
        Color Size Section
    </div>
</div>

<div id="price-section" class="section price-section col-sm-12 col-md-push-6 col-md-6">
    Price Section
</div>
<div id="attention-banner" class="section attention-banner col-sm-12 col-md-push-6 col-md-6">
    Attention Banner Section
</div>


.section {
  border-color: red;
  border-style: solid;
}

.left-side, .right-side{
  padding: 0;
}

.color-size-section {
  background-color: darkviolet;
  height: 200px;
}

.campaign-description-section {
  height: 200px;
}

.price-section {
  background-color: aqua;
}

.shirt-styles-section {
  background-color: lightgray;
  color: red;
  height: 500px;
}

.attention-banner {
  background-color: green;
}

.quality-section {
  background-color: lawngreen;
}

.designers-section {
  background-color: yellowgreen;
}

.footer {
  background-color: black;
}

答案 2 :(得分：0)

<html class=""><head>
    <style>
        .section {
  border-color: red;
  border-style: solid;
}
.color-size-section {
  background-color: darkviolet;
  height: 200px;
}
.campaign-description-section {
  height: 200px;
}
.price-section {
  background-color: aqua;
}
.shirt-styles-section {
  background-color: lightgray;
  color: red;
  height: 500px;
}
.attention-banner {
  background-color: green;
}
.quality-section {
  background-color: lawngreen;
}
.designers-section {
  background-color: yellowgreen;
}
.footer {
  background-color: black;
}
    </style>
    <style>
 #color-size-section
 {

                     }
                      #price-section{

                     }
@media screen and (max-width: 991px) {
 #color-size-section
 {
                     width:50%;
                     float:50%;
                     }
                     #price-section{
                     width:50%;
                     }
}
</style>
</head>
<body>



  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <link rel="canonical" href="http://codepen.io/anon/pen/EjxQjP">

  <link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">



  <!--#region Header Section-->
  <div class="">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">

          </a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="">Explore</a>
          </li>
          <li><a href="">Design</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!--#endregion Header Sections-->
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div>
          <div id="shirt-styles-section" class="section shirt-styles-section 
                         col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6" style="right:0%;  margin-bottom: 46px;">
            Shirt Styles Section
          </div>
          <div id="campaign-description-section" class="section campaign-description-section 
                         col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6" style="left:0%">
            Campaign Description Section
          </div>


          <div id="color-size-section" class="section color-size-section 
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6" style="left:0%">
            Color Size Section
          </div>
        </div>
        <div id="price-section" class="section price-section
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
          Price Section
        </div>
        <div id="attention-banner" class="section attention-banner
                         col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
          Attention Banner Section
        </div>

      </div>
      <div class="container-fluid">
        <div id="quality-section" class="section quality-section row">Quality Section</div>
      </div>
      <div class="container-fluid">
        <div id="designers-section" class="section designers-section row">Designers Section</div>
      </div>
      <div class="container-fluid">
        <div id="footer" class="section footer row">Footer</div>
      </div>
    </div>

    <script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>



    <script type="text/javascript">

    </script>

</div></body></html>
相关问题
最新问题