Il contenitore nella griglia di bootstrap risponde correttamente?

Question

Quindi ho 3 caselle che devono avere un'altezza e una larghezza particolari e averle impostate all'interno del bootstrap come elementi figlio. Guarda bene in piena vista come:

Tuttavia, quando ridimensiona la finestra, le caselle si spostano a sinistra piuttosto che galleggiare nel mezzo di quella grafica di sfondo. Inoltre, il testo di intestazione (in giallo) perde la sua imbottitura superiore come:

pensato che il "reattività" stava prendendo il sopravvento, ma non in grado di individuare e spero qualcuno di voi può aiutare.

mio HTML per questi sono:

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

E il mio css è:

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

Tutte le idee su quello che posso fare qui e dove controllare? Sto anche usando Bootstrap 3 in cima a questo css, ma non vedo dove sta causando lo spostamento delle caselle a sinistra giustificato.

Grazie mille.

Answer 1

Le colonne sono galleggiare a sinistra per impostazione predefinita e perché sei usando un'altezza/larghezza fissa all'interno delle colonne (.claimSteps), non hanno altra scelta che allineare a sinistra dopo il collasso della colonna media poiché non possono occupare il 100% della finestra più piccola.

L'allineamento della direzione deve principalmente alla struttura HTML.

Nota che un'area che dovresti prendere in considerazione è la larghezza della scatola che stai creando. È troppo largo e inizia a rompersi/traboccare perché è stato risolto. Se riesci a ridurlo, dovresti (i miei esempi riflettono questo, ma possono essere facilmente modificati alla larghezza predefinita)

La dimensione fissa della scatola entra in gioco a circa 400px. Nel secondo esempio ho reso la casella flessibile in modo che funzioni correttamente su tutte le finestre. Vedi gli esempi 1 e 2 su viewports under 400px.

Ecco alcuni esempi che possono essere d'aiuto.

Esempio 1: Installazione standard

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

Esempio 2: mobile Prime regolazioni

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

Esempio 3: Allineamento testo Esempio

.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

È necessario aggiungere class="row" prima di utilizzare class="col-**-**" come comune dopo class="container".

Answer 3

Hai provato a separare il tuo col-md-12 da quei tre stepBox?

Non vedo necessario avvolgere quelle colonne all'interno della prima colonna, quindi preferisco semplicemente terminare lo col-md-12 prima che inizi lo #stepsContainer.

Un'altra cosa è che chiaramente il tuo CSS limita la larghezza dello claimSteps ad essere inferiore alla larghezza dello schermo quando si verifica il punto di interruzione md. Dovresti almeno in questo punto modificare la proprietà width in CSS con la query multimediale.

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

Che dovrebbe farlo.Display div

Answer 4

predefinito come blocco, quindi float a sinistra, se si vuole impostare galleggiare a metà, è necessario impostare il suo visualizzazione a inline-block e impostare contenitore text-align al centro

nel tuo caso è possibile aggiungere visualizzazione inline-block per le regole CSS .claimSteps

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

Per intestazione, è possibile utilizzare padding invece di margine in div.submitHeader

V. snippet per il pieno risultato

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