Q

響應2列布局定位使用引導

2015-04-23 79 views 1 likes

1

我想建立一個2列響應佈局使用引導。這是相關代碼響應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

什麼IM的移動佈局即時得到 enter image description here

得到IM爭取什麼是這 enter image description here

這裏是code pen

2015-04-23 Parv Sharma

+1

試試這個：。顏色尺寸段{ 背景色：深紫紅; margin-top：-23％; height：200px; }不是最好的解決方案，但它的工作原理 – Mitch

A

回答

2

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

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

試試這個

2015-04-23 08:37:14

+0

嗨..我已更新我的問題，包括移動視圖。請看一看。您在移動設備 –

+0

k上正確回答dosent的工作，這意味着您也需要響應？ –

+0

是的。我也希望它響應。 –

1

我sugestion其重新考慮你的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; 
}

2015-04-23 09:05:55

+0

這不是一個答案 –

+1

我剛編輯我的答案 –

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>

2015-04-23 09:35:12

相關問題