Bootstrap：在同一行有居中塊和右塊

我從來沒有真正得到過Bootstrap的掛鉤，但是現在我真的需要它並且我在四處搜索之後無法按照我的需要使其工作。Bootstrap：在同一行有居中塊和右塊

我需要的東西很簡單。兩個div是一個在屏幕上居中，一個在最右邊。對於居中的div，我把它與中心塊一起工作，但之後的所有內容都放在了新的一行上。代碼：

<div className="row"> 
    <div className="center-block col-md-4" style={{ float: 'none' }}>Logo</div> 
    <div className="col-md-4">Some links</div> 
</div>

如果我繪製出整排有三個div的和col-MD-4我明白了一個在同一行，但我真的想避免只是一個空div。

但是，如果我使用最後一種方法，我仍然得到了最右邊的問題。我能得到的最好的結果是通過將text-xs-正確的應用於正確的div，但對於我所需要的仍然不夠。代碼：

<div className="row"> 
    <div className="col-md-4" /> 
    <div className="col-md-4">Logo</div> 
    <div className="col-md-4 text-xs-right">Some links</div> 
</div>

我多麼希望它看起來：

_______________________________ 
|   Logo   Links | 
|        | 
|        | 
|        | 
|______________________________|

編輯：在bootply嘗試它後，我發現，因爲它看起來這可能是我的設置有問題，就像我多麼希望它那裏。

編輯2：看起來我正在使用引導程序4，這就是爲什麼它不起作用。抱歉!

編輯3：我使用jsx，因此我需要className。它與普通HTML中的類相同。

來源

2017-03-07 Terris

這將在引導4.工作，不要忘記使用class=，而不是className=：

<div class="row"> 
     <div class="col-md-4 offset-md-4 text-center">Logo</div> 
     <div class="col-md-4 text-right">Some links</div> 
</div>

http://www.codeply.com/go/8gGRrwsyiL

來源

2017-03-07 10:45:20 ZimSystem

變化的className類

<div class="row"> 
<div class="container"> 
    <div class="col-md-6"> 
     Logo Here 
    </div> 
    <div class="col-md-6 pull-right"> 

    </div> 
</div>

來源

2017-03-07 08:11:59 Eth0

我需要className，因爲我使用的是jsx，而這些類並不是我所追求的，因爲徽標沒有居中在屏幕上，而第二類根本就不是很正確（儘管這可能是jsx的錯誤，因爲拉右不起作用）。 – Terris

-1

<div class="row"> 
    <div class="col-md-8 text-center">Logo</div> 
    <div class="col-md-4 text-right">Some links</div> 
</div>

來源

2017-03-07 08:59:44 Yves

不工作，對不起。但是在操場上測試之後，它可能只是因爲我的jsx設置，因爲您的代碼在模擬器中看起來很完美。 – Terris

<div class="row"> 
    <div class="col-md-4 col-md-offset-4">Logo</div> 
    <div class="col-md-2 col-md-offset-2">Some links</div> 
</div>

來源

2017-03-07 09:25:36 pzworks

雖然此代碼段可能會解決問題，但[包括解釋]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有助於提高帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 – DimaSan

Bootstrap：在同一行有居中塊和右塊

回答

相關問題