水平對齊自舉井

我使用自舉井做出一種需要從左到右（水平）的卡顯示類型，但由於某些原因井只需要垂直對齊。水平對齊自舉井

body { 
 
    background-color: #5C67B6; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding-top: 70px; 
 
} 
 

 
.btn-purple { 
 
    color: #fff; 
 
    background-color: #5C67B6; 
 
    border-color: #5C67B6; 
 
    /*set the color you want here*/ 
 
} 
 

 
.btn-purple:hover, 
 
.btn-purple:focus, 
 
.btn-purple:active, 
 
.btn-purple.active, 
 
.open>.dropdown-toggle.btn-purple { 
 
    color: #fff; 
 
    background-color: #4b5496; 
 
    border-color: #4b5496; 
 
    /*set the color you want here*/ 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container content-sm"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-8"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Test!</h3> 
 
      <p>The quick brown fox jumped over the lazy brown dog</p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
     </div> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Test!</h3> 
 
      <p>The quick brown fox jumped over the lazy brown dog</p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
     </div> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Test!</h3> 
 
      <p>The quick brown fox jumped over the lazy brown dog</p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

如果您檢查片段中，你會發現這一切都被垂直放置的各個單獨的孔被放置在後。我使用inline-block的用於容器，並試圖使用它沒有運氣的井。我怎樣才能讓它水平對齊？

來源

2017-06-24 Zezima

所以你想要檢測的孔，而不是對彼此的頂部並排側，？ – Nieminen

@Nieminen是的。我被告知使用內聯塊來實現這個不工作。 – Zezima

你們每口井的寬度都一樣嗎？ – Nieminen

第一個簡單的選擇是在你的主柱內使用cols，每個井都是.col-md-6 .col-xs-12或類似的東西。

下面的代碼段應該做我認爲你所描述的內容。

body { 
 
    background-color: #5C67B6; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding-top: 70px; 
 
} 
 

 
.btn-purple { 
 
    color: #fff; 
 
    background-color: #5C67B6; 
 
    border-color: #5C67B6; 
 
    /*set the color you want here*/ 
 
} 
 

 
.btn-purple:hover, 
 
.btn-purple:focus, 
 
.btn-purple:active, 
 
.btn-purple.active, 
 
.open>.dropdown-toggle.btn-purple { 
 
    color: #fff; 
 
    background-color: #4b5496; 
 
    border-color: #4b5496; 
 
    /*set the color you want here*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
<div class="container content-sm"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 col-xs-12"> 
 
      <div class="well"> 
 
       <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
       <h3 style="text-align: center;">Test!</h3> 
 
       <p>The quick brown fox jumped over the lazy brown dog</p> 
 
       <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
      <div class="well"> 
 
       <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
       <h3 style="text-align: center;">Test!</h3> 
 
       <p>The quick brown fox jumped over the lazy brown dog</p> 
 
       <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
      <div class="well"> 
 
       <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
       <h3 style="text-align: center;">Test!</h3> 
 
       <p>The quick brown fox jumped over the lazy brown dog</p> 
 
       <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
      <div class="well"> 
 
       <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80"> 
 
       <h3 style="text-align: center;">Test!</h3> 
 
       <p>The quick brown fox jumped over the lazy brown dog</p> 
 
       <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

來源

2017-06-24 02:09:08 Nieminen

謝謝。這很好。有什麼辦法讓它們更小，但功能相同？（2x2） – Zezima

夫婦的方式。最通用的可能只是在您的第一個div上拋出一個自定義類，像這樣...'.customClass {width：700px;最大寬度：100％; margin：0px auto; }' – Nieminen

這很有效。謝謝你的時間。 – Zezima

水平對齊自舉井

回答

相關問題