HTML CSS応答本部ブートストラップ

私は現在、デスクトップやタブレット上でうまく際に表示されるいくつかのdiv持っている：私は、モバイルビューにそれを縮小したときに、彼らはかなり悪い見て、再していない、しかし HTML CSS応答本部ブートストラップ

を適切-orient：

私は本当に彼らのように、自動的にそのように調整するだろう、彼らはタブレットデバイス上にある場合、モバイルデバイスは、彼らがこのような行の2を表示するとき、彼らはラインに3を示し、ということ：

これはちょうど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> 
       <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; 
}

すべてのアイデアは、彼らが応答シフトので、私はそれを調整することができますか？

ありがとうございます！

EDIT - 付加された付加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の外にパディングを追加している）：

モバイル（ちょうどより多くのそれをうずくまるように見える）：

EDIT - 私はこの問題を考えます

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

出典

2017-03-16 Tom Hammond

'col-xs-6'はどこで使いましたか？すべての調査項目がBootstrapグリッドを使用していない1つの大きなcol-xs-12にあるようです。各調査項目は列内にある必要があります。 – ZimSystem

私はブートストラップの例とその結果の出力を追加しました –

問題を引き起こしているカスタム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

出典

2017-03-17 02:40:54 ZimSystem

と答える編集を投稿しました。ありがとう！私はほとんど同じ答えを自分で得ました。しかし、きれいなHTMLは間違いなく+1です:) –

あなたはsurvey-item要素であなたの列クラスを配置する必要があります：ATIC CSSはここにあり、私は後ろにそれを追加するとき、機能性を破るようです。空白（偶数でなければならない）を必要としない限り、「デスクトップ」ビューの5列はブートストラップ12の列レイアウトでは使用できません。

例：

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

また、あなたのsurveys-list-container要素にrowクラスを追加します。最終的な結果は、次のようになります。

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

編集：ブートストラップカラムの動作について言及したいと思います。すべての列に同じクラスがある場合は、クラス名の最後の数値を取得し、その数で12を除算して列数を取得します。この場合、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要素内の子要素に追加されます。

出典

2017-03-16 21:56:36

そうです、これは私がそれがうまくいくはずだと思っていたので、これまで私が試みてきたことです（少なくともブートストラップはいつも以前は私の働きをしていました）。結果スクリーンショット。 –

@TomHammondは –

これらの2行は、ブートストラップ固有の振る舞いを投げたようだ。

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

それらを削除するバック伝統的なブートストラップ応答グリッド・システムの動作に戻りました。

出典

2017-03-17 02:43:23

HTML CSS応答本部ブートストラップ

答えて

関連する問題