Bootstrap窗體組對齊

我目前正在使用Bootstrap 3的UI上工作。我有一個form-group，我想將左邊的span對齊到h3。Bootstrap窗體組對齊

我的HTML：

<div class="row"> 
    <nav class="col-sm-3"> 
     <div class="form-group"> 
     <span class="status" aria-hidden="true"></span> 
     <h3>Project Title</h3> 
     </div> 
    </nav> 
    <div class="col-sm-9"> 
     ... 
    </div> 
</div>

我的CSS：

.status { 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color: yellow; 
}

不知何故，跨度從來沒有出現在屏幕上。所需的佈局應該是：

標題

你知道如何解決這個問題？

謝謝:)

來源

2017-07-19 TimHorton

'.STATUS：在.STATUS類離開{顯示：inline-block的;}' – sol

你能提供[mcve]？ – Tom

爲span提供一些文本值，並檢查它是否正常工作。如果您在div中使用該類，而不是span。 –

您可以添加靜靜地飄浮：

.status { 
 
    width:20px; 
 
    height:20px; 
 
    border-radius:50%; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<div class="row"> 
 
    <nav class="col-sm-3"> 
 
     <div class="form-group"> 
 
     <span class="status" aria-hidden="true"></span> 
 
     <h3>Project Title</h3> 
 
     </div> 
 
    </nav> 
 
    <div class="col-sm-9"> 
 
     ... 
 
    </div> 
 
</div>

來源

2017-07-19 13:19:52 Jainam

謝謝，完美的作品！雖然我忘記了剩下的浮... – TimHorton

Bootstrap窗體組對齊

回答

相關問題