行類內的Bootstrap Center col-sm div

Question

我正在使用引導程序，並且有一行包含動態數量的col-sm-3 div。 我希望它能使col-sm-3 divs在行內居中，而不是向左對齊

這是一些示例代碼：

<div class="custom-fields row custom-field-output">
    <div class="row">
        <div class="col-sm-3">
             content 1
        </div>
        <div class="col-sm-3">
             content 2
        </div>
    </div>
 </div>

我想在行div內水平居中放置兩個col-sm-3 div。

Answer 1

試試這個代碼：

<div class="custom-fields row custom-field-output">
    <div class="row col col-sm-12">
        <div class="col col-sm-3 col-offset-3">
             content 1
        </div>
        <div class="col col-sm-3 ">
             content 2
        </div>
    </div>
 </div>

Answer 2

請嘗試以下操作，然后檢查此源： http : //getbootstrap.com/css/#grid-example-basic

<div class="custom-fields row custom-field-output">
<div class="row">
    <div class="col-sm-6">
        content 1
    </div>
    <div class="col-sm-6">
        content 2
    </div>
</div>

Answer 3

<div class="custom-fields row custom-field-output">
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        content 1
    </div>
    <div class="col-sm-4 col-sm-offset-4">
        content 2
    </div>
</div>

該代碼將用於保持左右邊距不變。

Answer 4

試試這個代碼：

<div class="custom-fields row custom-field-output">
        <div class="row">
    <div class="col-sm-3"><div>
            <div class="col-sm-3">
                 content 1
            </div>
            <div class="col-sm-3">
                 content 2
            </div>
    <div class="col-sm-3"></div>
        </div>
     </div>

Answer 5

關於這一點很晚了，但是我相信這是您想要做的：

<div class="custom-fields row custom-field-output">
    <div class="row">
        <div class="col-sm-3 col-sm-offset-3">
             content 1
        </div>
        <div class="col-sm-3">
             content 2
        </div>
    </div>
 </div>