ブートストラップグリッドのコンテナが正しく応答していますか？

Question

私は特定の高さと幅を持つ必要がある3つのボックスを持ち、それらをブートストラップ内で子要素として設定しています。完全なビューで良いルックス：ウィンドウをリサイズしたときに

しかし、ボックスがその背景グラフィックの途中で左ではなく、フロートにシフト。

は、「応答性」はオーバー取っていたが、それを正確に特定することはできませんし、あなたのいくつかは助けることができる期待しています考え出し：としてさらに、（黄色）のヘッダーテキストは、その上部のパディングを失います。

<div class="container"> 
    <div class="claimHead col-md-12"> 
     <div class="submitHeader" style="margin-top: 60px; margin-bottom: 60px; margin-left: 30px;"> 
      <h1 style="font-size: 36px;">Claim Submission Tool</h1> 
      <p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p> 
     </div> 
     <div id="stepsContainer"> 
      <div class="col-md-4 stepsBox"> 
       <div class="claimSteps" id="stepOne"> 
        <p class="claimStepNumber">1</p> 
        <p class="claimStepTitle">step one</p> 
        <p class="claimStepText">Get started by entering your claim information in the fields below.</p> 
       </div> 
      </div> 
      <div class="col-md-4 stepsBox"> 
       <div class="claimSteps" id="stepTwo"> 
        <p class="claimStepNumber">2</p> 
        <p class="claimStepTitle">step two</p> 
        <p class="claimStepText">Next drag & drop or upload your documentation.</p> 
       </div> 
      </div> 
      <div class="col-md-4 stepsBox"> 
       <div class="claimSteps" id="stepThree"> 
        <p class="claimStepNumber">3</p> 
        <p class="claimStepTitle">step three</p> 
        <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

そして、私のCSSは次のとおりです：これらのため

私のHTMLは、私はここに、どこで確認するために何ができるかに

#stepsContainer { 
    text-align: center; 
} 

.stepsBox { 
    padding-bottom: 60px; 
} 

.claimSteps { 
    padding-top: 40px; 
    width: 335px; 
    height: 285px; 
    background-color: #2dccd3; 
    color: #ffffff; 
    text-align: center; 
} 

.claimStepNumber { 
    font-size: 38px; 
    background-color: #ffffff; 
    color: #2dccd3; 
    width: 65px; 
    height: 65px; 
    border-radius: 50%; 
    margin-left: 135px; 
} 

.claimStepTitle { 
    color: #ffffff; 
    font-size: 18px; 
} 

.claimStepText { 
    text-align: center; 
    margin-left: 33.3%; 
    width: 33.3%; 
} 

任意のアイデア？また、このCSSの上にBootstrap 3を使用していますが、ボックスが左寄せにシフトする原因はわかりません。

ありがとうございました。

Answer 1

フル検索結果のスニペットと、あなたがしているのでdiv.submitHeader

にパディングの代わりに、余裕を見使用することができます（.claimSteps）内の固定された高さ/幅を使用すると、小さな列のビューポートの100％を占めることができないため、中程度の列が崩壊すると左に揃うという選択肢はありません。

見出しの配置は、主にHTML構造のためです。

変更する必要がある領域の1つは、作成するボックスの幅です。広すぎて、固定されているためにブレーク/オーバーフローが始まります。これを減らすことができれば、私の例はこれを反映していますが、簡単にデフォルトの幅に戻すことができます。

固定サイズのボックスも約400pxで再生されます。 2番目の例では、ボックスをフレキシブルにして、すべてのビューポートで正しく動作するようにしました。 400px以下のビューポートの例1および2を参照してください。

以下は、参考になる例です。

例1：標準セットアップ

.submitHeader { 
 
    margin: 60px 0; 
 
} 
 
.submitHeader h1 { 
 
    font-size: 36px; 
 
} 
 
.submitHeader p { 
 
    font-size: 18px; 
 
} 
 
.claimSteps { 
 
    width: 285px; 
 
    height: 285px; 
 
    background-color: #2dccd3; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    display: table; 
 
} 
 
.claimStepNumber { 
 
    margin-top: 40px; 
 
    font-size: 38px; 
 
    background-color: #ffffff; 
 
    color: #2dccd3; 
 
    width: 55px; 
 
    height: 55px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    display: table-cell; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    transform: translate(-50%); 
 
} 
 
.claimStepTitle { 
 
    color: #ffffff; 
 
    font-size: 18px; 
 
    margin-top: 110px; 
 
} 
 
.claimStepText { 
 
    text-align: center; 
 
    margin-left: 33.3%; 
 
    width: 33.3%; 
 
} 
 
@media (min-width: 1200px) { 
 
    .submitHeader { 
 
    margin: 60px 40px; 
 
    } 
 
} 
 
@media (max-width: 991px) { 
 
    .claimSteps { 
 
    margin: 30px auto; 
 
    } 
 
    .submitHeader { 
 
    margin-top: 60px; 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="submitHeader"> 
 
    <h1>Claim Submission Tool</h1> 
 

 
    <p>Filing claims has never been easier, it's a simple as 1, 2, 3</p> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepOne"> 
 
     <p class="claimStepNumber">1</p> 
 
     <p class="claimStepTitle">step one</p> 
 
     <p class="claimStepText">Get started by entering your claim information in the fields below.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepTwo"> 
 
     <p class="claimStepNumber">2</p> 
 
     <p class="claimStepTitle">step two</p> 
 
     <p class="claimStepText">Next drag and drop or upload your documentation.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepThree"> 
 
     <p class="claimStepNumber">3</p> 
 
     <p class="claimStepTitle">step three</p> 
 
     <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

例2：モバイル最初のセットアップ

.submitHeader { 
 
    margin: 60px 0; 
 
} 
 
.submitHeader h1 { 
 
    font-size: 36px; 
 
} 
 
.submitHeader p { 
 
    font-size: 18px; 
 
} 
 
.claimSteps { 
 
    width: 285px; 
 
    height: 285px; 
 
    background-color: #2dccd3; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    display: table; 
 
} 
 
.claimStepNumber { 
 
    margin-top: 40px; 
 
    font-size: 38px; 
 
    background-color: #ffffff; 
 
    color: #2dccd3; 
 
    width: 55px; 
 
    height: 55px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    display: table-cell; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    transform: translate(-50%); 
 
} 
 
.claimStepTitle { 
 
    color: #ffffff; 
 
    font-size: 18px; 
 
    margin-top: 110px; 
 
} 
 
.claimStepText { 
 
    text-align: center; 
 
    margin-left: 33.3%; 
 
    width: 33.3%; 
 
} 
 
@media (min-width: 1200px) { 
 
    .submitHeader { 
 
    margin: 60px 40px; 
 
    } 
 
} 
 
@media (max-width: 991px) { 
 
    .claimSteps { 
 
    margin: 30px auto; 
 
    } 
 
    .submitHeader { 
 
    margin-top: 60px; 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
    } 
 
} 
 
@media (max-width: 400px) { 
 
    /*Color For Demo Only*/ 
 
    body { 
 
    background: red; 
 
    } 
 
    .claimSteps { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-bottom: 40px; 
 
    } 
 
} 
 
/*Color For Demo Only*/ 
 

 
@media (max-width: 320px) { 
 
    body { 
 
    background: lightblue; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="submitHeader"> 
 
    <h1>Claim Submission Tool</h1> 
 

 
    <p>Filing claims has never been easier, it's a simple as 1, 2, 3</p> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepOne"> 
 
     <p class="claimStepNumber">1</p> 
 
     <p class="claimStepTitle">step one</p> 
 
     <p class="claimStepText">Get started by entering your claim information in the fields below.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepTwo"> 
 
     <p class="claimStepNumber">2</p> 
 
     <p class="claimStepTitle">step two</p> 
 
     <p class="claimStepText">Next drag and drop or upload your documentation.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="claimSteps" id="stepThree"> 
 
     <p class="claimStepNumber">3</p> 
 
     <p class="claimStepTitle">step three</p> 
 
     <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

例3：テキストの配置例

.claimSteps { 
 
    width: 285px; 
 
    height: 285px; 
 
    background-color: #2dccd3; 
 
    color: #ffffff; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h1>Claim Submission Tool</h1> 
 

 
    <p>Filing claims has never been easier, it's a simple as 1, 2, 3</p> 
 
    <div class="row"> 
 
    <div id="stepsContainer"> 
 
     <div class="col-md-4"> 
 
     <div class="claimSteps"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="claimSteps"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="claimSteps"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

class="container"の後にclass="col-**-**"を共通に使用する前に、class="row"を追加する必要があります。

Answer 3

col-md-12を3つのstepBoxのものから分離しようとしましたか？

最初の列の中にこれらの列をラップする必要はありません。だから、が始まる前にcol-md-12を終了するだけです。

もう一つは、明らかに、あなたのCSSは、mdのブレークポイントが発生したときに、画面幅がより小さくなるようにclaimStepsの幅を制限していることです。少なくともこの点では、メディアクエリでCSSのwidthプロパティを変更する必要があります。

@media (max-width: 1199px) 
{ 
    .claimSteps { width: 100%; } 
} 

これでいいはずです。フロートはあなたはそれが真ん中に浮かぶ設定したい場合、あなたは彼の表示インラインブロックに設定し、コンテナテキスト整列を設定する必要があり、を左にそれてブロックとして

Answer 4

デフォルトのdivの表示、あなたは.claimSteps CSSルールにインラインブロック表示を追加することができ、あなたのケースでは、中心

へ

.claimSteps { 
    padding-top: 40px; 
    width: 335px; 
    height: 285px; 
    background-color: #2dccd3; 
    color: #ffffff; 
    text-align: center; 
    display: inline-block; 
} 

は、ヘッダーのために、あなたは、列は、デフォルトで左に浮いている

#stepsContainer { 
 
    text-align: center; 
 
} 
 

 
.stepsBox { 
 
    padding-bottom: 60px; 
 
} 
 

 
.claimSteps { 
 
    padding-top: 40px; 
 
    width: 335px; 
 
    height: 285px; 
 
    background-color: #2dccd3; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.claimStepNumber { 
 
    font-size: 38px; 
 
    background-color: #ffffff; 
 
    color: #2dccd3; 
 
    width: 65px; 
 
    height: 65px; 
 
    border-radius: 50%; 
 
    margin-left: 135px; 
 
} 
 

 
.claimStepTitle { 
 
    color: #ffffff; 
 
    font-size: 18px; 
 
} 
 

 
.claimStepText { 
 
    text-align: center; 
 
    margin-left: 33.3%; 
 
    width: 33.3%; 
 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="claimHead col-md-12"> 
 
    <div class="submitHeader" style="padding-top: 60px; padding-bottom: 60px; padding-left: 30px;"> 
 
     <h1 style="font-size: 36px;">Claim Submission Tool</h1> 
 
     <p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p> 
 
    </div> 
 
    <div id="stepsContainer"> 
 
     <div class="col-md-4 stepsBox"> 
 
     <div class="claimSteps" id="stepOne"> 
 
      <p class="claimStepNumber">1</p> 
 
      <p class="claimStepTitle">step one</p> 
 
      <p class="claimStepText">Get started by entering your claim information in the fields below.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 stepsBox"> 
 
     <div class="claimSteps" id="stepTwo"> 
 
      <p class="claimStepNumber">2</p> 
 
      <p class="claimStepTitle">step two</p> 
 
      <p class="claimStepText">Next drag & drop or upload your documentation.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 stepsBox"> 
 
     <div class="claimSteps" id="stepThree"> 
 
      <p class="claimStepNumber">3</p> 
 
      <p class="claimStepTitle">step three</p> 
 
      <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>