Vùng chứa trong lưới khởi động phản hồi chính xác?

Question

Vì vậy, tôi có 3 hộp cần phải có chiều cao và chiều rộng cụ thể và đã đặt chúng trong bootstrap dưới dạng phần tử con. Có vẻ tốt theo quan điểm đầy đủ như:

Tuy nhiên, khi cửa sổ thay đổi kích thước, các hộp chuyển sang bên trái chứ không phải là phao ở giữa mà nền đồ họa. Ngoài ra, văn bản tiêu đề (màu vàng) thua đệm trên của nó như:

đặn các "đáp ứng" được tiếp quản nhưng không thể xác định nó và hy vọng một số bạn có thể giúp đỡ.

HTML của tôi cho đây là:

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

Và css của tôi là:

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

Bất kỳ ý tưởng về những gì tôi có thể làm ở đây và nơi để kiểm tra? Tôi cũng đang sử dụng Bootstrap 3 trên đầu trang của css này, nhưng tôi không nhìn thấy nơi nó gây ra các hộp để di chuyển trái hợp lý.

Cảm ơn nhiều.

Answer 1

Cột được thả nổi sang trái theo mặc định và vì bạn sử dụng chiều cao cố định/chiều rộng bên trong các cột (.claimSteps), chúng không có lựa chọn nào khác ngoài việc căn chỉnh trái khi cột trung bình sụp đổ vì chúng không thể chiếm 100% khung nhìn nhỏ hơn.

Căn chỉnh đầu đề phải chủ yếu đến cấu trúc HTML của bạn.

Lưu ý rằng một khu vực bạn nên xem xét thay đổi là chiều rộng của hộp bạn đang tạo. Đó là quá rộng và bắt đầu phá vỡ/tràn vì nó cố định. Nếu bạn có thể giảm nó, bạn nên (ví dụ của tôi phản ánh điều này nhưng có thể dễ dàng được thay đổi về chiều rộng mặc định của bạn.)

Kích thước cố định của hộp cũng đi vào khoảng 400px. Trong ví dụ thứ hai, tôi đã làm cho hộp linh hoạt để nó hoạt động bình thường trên tất cả các khung nhìn. Xem ví dụ 1 và 2 về chế độ xem dưới 400px.

Dưới đây là một số ví dụ có thể hữu ích.

Ví dụ 1: Thiết lập tiêu chuẩn

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

Ví dụ 2: Điện thoại di động cài đặt Đầu tiên

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

Ví dụ 3: Text Alignment Ví dụ

.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

Bạn nên thêm class="row" trước khi sử dụng class="col-**-**" như thông thường sau class="container".

Answer 3

Bạn đã thử tách col-md-12 khỏi ba số stepBox của mình chưa?

Tôi không thấy cần thiết để bao bọc các cột đó trong cột đầu tiên, vì vậy tôi chỉ muốn kết thúc số col-md-12 trước khi bắt đầu #stepsContainer.

Một điều nữa rõ ràng là CSS của bạn giới hạn chiều rộng của claimSteps nhỏ hơn chiều rộng màn hình là khi xảy ra điểm dừng md. Bạn nên nhập ít nhất vào thời điểm này thay đổi thuộc tính chiều rộng trong CSS bằng truy vấn phương tiện.

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

Điều đó sẽ thực hiện.

Answer 4

Mặc định div hiển thị như khối, vì vậy nó phao sang trái, nếu bạn muốn thiết lập nó nổi lên giữa, bạn phải thiết lập hiển thị mình để inline-block và thiết lập chứa text-align để trung tâm

trong trường hợp của bạn, bạn có thể thêm màn hình inline-block cho .claimSteps quy tắc CSS

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

Đối với tiêu đề, bạn có thể sử dụng đệm thay vì lợi nhuận trong div.submitHeader

Xem đoạn mã cho kết quả đầy đủ

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