2017-05-30 92 views
0

我有bootstrap,並且裏面有一個名爲「parent」的元素。父母彼此向左移動。如果div大到足以容納4個父母,則它將適合4個父母成對排列,其他適合第二個等等,如果它足夠大以適合三個,則它將適合三排成一排......(尺寸取決於屏幕寬度)。問題出現在div大於3父母或4和20px或類似的東西時。然後這個地方左邊是充滿了保證金,你可以在圖片中看到:讓div保持水平居中

Margin on right

我怎麼能保持股利與父母內部引導水平居中很好,所以絕不會有分佈不均保證金。在左側和右側邊緣應始終相同。該代碼是在這裏(忽略明確的股利,它只是用浮法父母的幫助,所以也與家長綿延):

/* Some CSS to make the result easier to follow */ 
 
.parent { 
 
    background-color: white; 
 
    outline: 1px solid black; 
 
}
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="well" style="padding: 2em 0;"> 
 
    <div class="profile-exams"> 
 
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div> 
 
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div> 
 
    <div class="clear" style="clear: both;"></div> 
 
    </div> 
 
</div>

的問題是,我不能設置靜態「輪廓考試」的寬度,因爲如果內部有2個,3個或5個框,它會發生變化。但如果我無法定義寬度,它不會居中。

+0

用bootstrap格列 – ZimSystem

+0

如何將我用它做網格列? @ZimSystem – csserrs

+0

@csserrs我可以用jsfiddle來生成圖像中的輸出嗎? –

回答

0

我不知道這是否是你想要的,但在這裏它是:

.profile-exams { 
 
    text-align: center; 
 
} 
 
.parent { 
 
    text-align: left; 
 
/* These lines aren't necessary, but just to make the result easier to follow */ 
 
    background-color: white; 
 
    outline: 1px solid black; 
 
}
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="well" style="padding: 2em 0;"> 
 
    <div class="profile-exams"> 
 
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div> 
 
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div> 
 
    <div class="clear" style="clear: both;"></div> 
 
    </div> 
 
</div>

CodePen

+0

謝謝你的迴應,但文本對齊中心似乎並沒有做伎倆..我會張貼片段,但網站是動態的,我將不得不編輯很長時間,因爲它包含許多Django變量 – csserrs

+0

好吧,將嘗試修復該問題 –

+0

@csserrs文本對齊中心不工作的方式? –