HTML CSS響應股利引導

Question

我現在有一些div，當臺式機或平板電腦上很好地顯示：

然而，當我縮小它歸結爲一個移動視圖，它們看起來非常糟糕，並且沒有重新-orient適當地：

我很喜歡它們自動調整，使得當它們是平板設備上它們在一條線上示出3，並且當移動設備它們在這樣的行顯示2 ：

看起來這正是col-xs-6在bootstrap中的作用，但是當我添加它時，它似乎不起作用。

這裏的HTML：

<div id="surveys" class="surveys col-xs-12"><div> 
    <div class="col-xs-12"> 
     <div class="row"> 
      <div class="col-xs-12" id="title"> 
       <h4 style="text-transform: uppercase;">Surveys</h4> 
       <h5 class="sub-title">The Best Way to Get Free Coins</h5> 
      </div> 
      <div id="surveys-list" class="col-xs-12"><div> 
    <div id="surveys-list-container"><div class="survey-item"> 
    <div id="2697033" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">49</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">10 min survey</span> 
</div></div> 
    </div> 
</div><div class="survey-item"> 
    <div id="2697013" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">85</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">20 min survey</span> 
</div></div> 
    </div> 
</div><div class="survey-item"> 
    <div id="2697207" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">85</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">18 min survey</span> 
</div></div> 
    </div> 
</div><div class="survey-item"> 
    <div id="2697031" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">85</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">10 min survey</span> 
</div></div> 
    </div> 
</div><div class="survey-item"> 
    <div id="2697999" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">87</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">18 min survey</span> 
</div></div> 
    </div> 
</div><div class="survey-item"> 
    <div id="2697687" class="item survey"> 
     <span class="note new">&nbsp;Opened&nbsp;</span> 
     <div id="reward-box" class="reward-box"><div> 

    <p class="amount"> 
     <i class="fa fa-plus"></i> 

     <span class="value">85</span> 
     <span class="currency">reward points</span> 
     <span class="hidden">+More</span> 
    </p> 
</div></div> 
     <div id="loi-box" class="loi-box"><div class="loi"> 
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
    <span class="duration">10 min survey</span> 
</div></div> 
    </div> 
</div></div> 
</div></div> 
     </div> 
    </div> 
</div></div> 

而CSS：

#surveys h4 { 
    font-family: Montserrat-Bold; 
    letter-spacing: .1em; 
    margin-top: 16px; 
    margin-bottom: 8px; 
} 

#surveys h4 { 
    text-transform: uppercase; 
    color: #555555; 
    font-size: 18px; 
    font-weight: bold; 
    line-height: 1.1; 
    font-family: Montserrat-Regular, Verdana, sans-serif; 
} 

#surveys .sub-title { 
    margin-bottom: 16px; 
    margin-top: 0px; 
    color: #777777; 
    font-size: 14px; 
    font-family: inherit; 
    font-weight: 800; 
    line-height: 1.1; 
    font-family: Montserrat-Regular, Verdana, sans-serif; 
} 

#surveys .survey-item { 
    float: left; 
    width: 19.2%; 
    display: block; 
    margin: 5px 0.8% 5px 0; 
    border-radius: 7px 7px 6px 6px; 
    border-width: 1px; 
    border-style: solid; 
    position: relative; 
    cursor: pointer; 
    background-color: #FFFFFF; 
    border-color: #dddddd; 
    -moz-box-shadow: 0 2px 0 0 #cccccc; 
    -webkit-box-shadow: 0 2px 0 0 #cccccc; 
    box-shadow: 0 2px 0 0 #cccccc; 
    font-family: Montserrat-Regular, Verdana, sans-serif; 
    height: 100%; 
    overflow-y: visible; 
    background-color: #FFFFFF; 
    -webkit-font-smoothing: antialiased; 
    font-size: 14px; 
    line-height: 1.42857; 
    color: #333333; 
    background-color: #fff; 
} 

#surveys .survey-item { 
    float: left; 
    width: 19.2%; 
    display: inline-block; 
    margin: 5px 0.8% 5px 0; 
    border-radius: 7px 7px 6px 6px; 
    border-width: 1px; 
    border-style: solid; 
    position: relative; 
    cursor: pointer; 
    background-color: #FFFFFF; 
    border-color: #dddddd; 
    -moz-box-shadow: 0 2px 0 0 #cccccc; 
    -webkit-box-shadow: 0 2px 0 0 #cccccc; 
    box-shadow: 0 2px 0 0 #cccccc; 
} 

#offers .note, #surveys .note { 
    display: none; 
    font-family: Montserrat-Bold, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 0.625em; 
    position: absolute; 
    right: -0.5em; 
    line-height: 2; 
    border-left-width: 10px; 
    border-left-style: solid; 
    border-right-width: 5px; 
    border-right-style: solid; 
    color: #139493; 
    background-color: #a5e2e1; 
    border-left-color: #a5e2e1; 
    border-right-color: #a5e2e1; 
    box-shadow: 0 1px 0 0 #dddddd; 
    -moz-box-shadow: 0 1px 0 0 #dddddd; 
    -webkit-box-shadow: 0 1px 0 0 #dddddd; 
} 

#surveys .reward-box { 
    font-family: BebasNeue, Impact, sans-serif; 
    font-weight: normal; 
    font-size: 1.875em; 
    /*padding: 10.2px;*/ 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    background-color: #17b4b3; 
} 

#surveys .reward-box .amount { 
    color: #f6fcfc; 
    position: relative; 
    width: 100%; 
    display: inline-block; 
    letter-spacing: 0.0125em; 
    white-space: nowrap; 
    margin: 0 0 10px; 
    margin-bottom: 0; 

} 

#surveys .reward-box .value { 
    font-size: 2em; 
    font-weight: bold; 
    vertical-align: sub; 
    margin: 3%; 
    display: inline-block; 
    padding-bottom: .5em; 
} 

#surveys .reward-box .currency { 
    color: #d1f0f0; 
    position: relative; 
    /*width: 50%;*/ 
    vertical-align: middle; 
    text-align: right; 
    font-family: Montserrat-Bold, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 11px; 
    display: inline-block; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    max-height: 2.8em; 
    white-space: normal; 
} 

#surveys .loi-box { 
    font-family: Montserrat-Bold, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 0.75em; 
    text-transform: capitalize; 
    text-indent: -2em; 
} 

#surveys .loi-box .duration { 
    vertical-align: middle; 
    font-family: Montserrat-Bold, Verdana, sans-serif; 
    font-weight: normal; 
    font-size: 12px; 
    padding: 8px 0; 
    text-transform: capitalize; 
    text-indent: -2em; 
    color: #888888; 
    line-height: 16.8px; 
    letter-spacing: .01em; 
} 

#reward-box { 
    padding: 0px; 
} 

#surveys .reward-box i { 
    color: #4ac5c4; 
    margin-right: -3px; 
    font-size: 1.3em; 
    vertical-align: middle; 
    display: inline; 
    letter-spacing: 0.0125em; 
    white-space: nowrap; 
    /*margin-bottom: 1em;*/ 
} 

#intro-description { 
    width: 50% !important; 
} 

#surveys-list-container { 
    display: block; 
    float: left; 
    width: 100%; 
    position: relative; 
    margin-bottom: 16px; 
} 

任何想法如何，我可以調整，這樣他們響應轉變？

謝謝！

編輯 - 添加具有增加的附加row和col-xs-6和輸出結果的HTML代碼：

<div id="surveys" class="surveys col-xs-12"> 
    <div> 
     <div class="col-xs-12"> 
      <div class="row"> 
       <div class="col-xs-12" id="title"> 
        <h4 style="text-transform: uppercase;">Surveys</h4> 
       </div> 
       <div id="surveys-list" class="col-xs-12"> 
        <div> 
         <div id="surveys-list-container row"> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697033" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 
              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">49</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">10 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697013" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 

              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">85</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">20 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697033" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 
              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">49</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">10 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697013" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 

              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">85</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">20 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697033" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 
              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">49</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">10 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="survey-item col-md-3 col-xs-6"> 
           <div id="2697013" class="item survey"> 
            <span class="note new">&nbsp;Opened&nbsp;</span> 
            <div id="reward-box" class="reward-box"> 
             <div> 

              <p class="amount"> 
               <i class="fa fa-plus"></i> 

               <span class="value">85</span> 
               <span class="currency">reward points</span> 
               <span class="hidden">+More</span> 
              </p> 
             </div> 
            </div> 
            <div id="loi-box" class="loi-box"> 
             <div class="loi"> 
              <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20"> 
              <span class="duration">20 min survey</span> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

筆記本電腦（一切似乎做的是添加填充到的div外）：

移動（似乎只是把它揉成一團更多）：

編輯 - 我認爲這個問題ATIC CSS就出在這裏，當我回到添加它，它似乎打破功能：

#surveys .survey-item { 
    float: left; 
    width: 19.2%; 
    display: inline-block; 
    margin: 5px 0.8% 5px 0; 
    border-radius: 7px 7px 6px 6px; 
    border-width: 1px; 
    border-style: solid; 
    position: relative; 
    cursor: pointer; 
    background-color: #FFFFFF; 
    border-color: #dddddd; 
    -moz-box-shadow: 0 2px 0 0 #cccccc; 
    -webkit-box-shadow: 0 2px 0 0 #cccccc; 
    box-shadow: 0 2px 0 0 #cccccc; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

Answer 1

自定義CSS中有幾件事導致問題。主要涉及設置每個項目的寬度和邊距。只要讓每個項目填入col-* ..

#surveys .survey-item { 
    display: block; 
    margin: 5px 0; 
    border-radius: 7px 7px 6px 6px; 
    border-width: 1px; 
    border-style: solid; 
    position: relative; 
    cursor: pointer; 
    background-color: #FFFFFF; 
    border-color: #dddddd; 
    -moz-box-shadow: 0 2px 0 0 #cccccc; 
    -webkit-box-shadow: 0 2px 0 0 #cccccc; 
    box-shadow: 0 2px 0 0 #cccccc; 
} 

我也清理了HTML。有很多嵌套關卡。只要確保col總是立即行的孩子。

http://www.codeply.com/go/dqgFudTPTU

Answer 2

您需要將在survey-item元素的列類。除非您需要空格（必須是偶數），否則Bootstraps 12列布局將無法在「桌面」視圖上顯示5列。

例子：

<div class="survey-item col-md-3 col-xs-6"> 
    <div id="2697033" class="item survey"> 
     ... 
    </div> 
</div> 

你會也row類添加到您的surveys-list-container元素。最終結果如下所示：

<div id="surveys-list-container" class="row"> 
    <div class="survey-item col-md-3 col-xs-6"> 
     ... 
    </div> 
    <div class="survey-item col-md-3 col-xs-6"> 
     ... 
    </div> 
    <div class="survey-item col-md-3 col-xs-6"> 
     ... 
    </div> 
</div> 

編輯：希望提及引導列的工作方式。鑑於所有列都具有相同的類，您將類名稱中的最後一個數字除以該數字以獲得列數。在這種情況下，col-md-3將是12/3，這將是4列。要獲得6列，你會採取12/x = 6這將是2使你將使用的類col-md-2。

編輯：在survey-item上看到您的CSS後，我會建議您將其更改爲以下內容。

#surveys .survey-item { 
    border-radius: 7px 7px 6px 6px; 
    border-width: 1px; 
    border-style: solid; 
    position: relative; 
    cursor: pointer; 
    background-color: #FFFFFF; 
    border-color: #dddddd; 
    -moz-box-shadow: 0 2px 0 0 #cccccc; 
    -webkit-box-shadow: 0 2px 0 0 #cccccc; 
    box-shadow: 0 2px 0 0 #cccccc; 
} 

引導列會做的浮動和寬度爲您服務。理想情況下，padding和margins將被添加到survey-item元素中的子元素。

Answer 3

看來這兩條線都擺脫引導固有行爲：

#surveys .survey-item { 
    width: 19.2%; 
    margin: 5px 0.8% 5px 0; 
} 

刪除它們恢復到傳統的自舉響應電網系統的行爲。