如果連續少於3個，則動態更改引導程序以居中

Question

目前，我有三col-md-4列，每列顯示一個圖像。 如果用戶僅上傳了1幅或2幅圖像，則它將按常態浮動內容，但將剩余的空間留給第三位。

CSS是否可以將1-2列居中，直到添加了第3列？

    <div class="container>

     <div class="row">

        <div class="col-md-4 image-1">
         <img>
        </div>

        <div class="col-md-4 image-2">
         <img>
        </div>

        <div class="col-md-4 image-3">
         <img>
        </div>

     </div>

    </div>

Answer 1

我認為您不應該將左對齊的項目（3個或更多）與居中對齊的項目混合使用。 當一組2個項目跟隨一組4個或5個項目時會發生什么？

如果您希望它們全部居中，只需將自定義類（在我的情況下為.centerRows ）添加到容器中，然后使用以下CSS ：

 .centerRows>.row { text-align: center; } .centerRows>.row>[class^="col-"] { text-align: initial; float: none; margin: 0 auto; display: inline-block; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container centerRows"> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-3"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-3"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> </div> </div> 

如果您只想使兩個或更少子級的行居中，請在通過js計算子級后，向您要居中的行添加一個自定義類。 概念證明：

 $('.container>.row').each(function(){ if($(this).children().size() < 3) $(this).addClass('centerMe'); }) 

 .centerMe { text-align: center; } .centerMe>[class^="col-"] { text-align: initial; float: none; margin: 0 auto; display: inline-block; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-3"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-3"> <img src="http://placehold.it/350x150"> </div> </div> <div class="row"> <div class="col-md-4 image-1"> <img src="http://placehold.it/350x150"> </div> <div class="col-md-4 image-2"> <img src="http://placehold.it/350x150"> </div> </div> </div> 

Answer 2

恕我直言，您不能使用CSS執行此操作。 可以使用JS完成。 像這樣：

if($('.image-3').length === 0){
    $('.row').find('div').RemoveClass('col-md-4');
    $('.row').find('div').AddClass('col-md-6');
}

但是，如果您要向算法中添加更多語句，我的意思是“如果僅是一個div或只有4個div（下一行有一個）”，您將必須獲得更復雜的代碼。