在桌面/平板電腦中連接一行，在移動設備中連接兩列？

我有鏈接的頁面節想這對桌面/移動：在桌面/平板電腦中連接一行，在移動設備中連接兩列？

link link link link link link

但是，這在移動

link link 
link link 
link link

你能提供有關如何讓引導這方面的工作有什麼建議？我現在使用的HTML如下所示。不同的HTML會有幫助嗎？

<span class="col-xs-12 text-center" > 
    <a href="http://link" class=" col-xs-6" >link</a> 
    <a href="http://link" class=" col-xs-6" >link</a> 
    <a href="http://link" class=" col-xs-6" >link</a> 
    <a href="http://link" class=" col-xs-6" >link</a> 
    <a href="http://link" class=" col-xs-6" >link</a> 
    <a href="http://link" class=" col-xs-6" >link</a> 
</span>

來源

2015-06-20 Mr Smith

你可以沒有列作爲沒有「行」層的列的孩子。見https://github.com/twbs/bootlint/wiki/E014 – cvrebert

你可以如下做到這一點：

<span class="col-xs-12 text-center" > 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
    <a href="http://link" class="col-xs-6 col-md-2" >link</a> 
</span>

來源

2015-06-20 14:07:35

'col-xs-6 col-sm-6 col-md-2 col-lg-2'是多餘的;只需使用'col-xs-6 col-md-2'。請參閱https://github.com/twbs/bootlint/wiki/E029 – cvrebert

@cvrebert。得到它了！！謝謝（你的）信息！！更新了答案！ :) –

有什麼辦法可以覆蓋這種行爲？如果我只想讓col-xs-6應用於移動設備，那該怎麼辦？ –

<div class="row"> 
    <span class="col-md-12 col-xs-12 text-center"> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    <a href="http://link" class="col-md-2 col-xs-6">link</a> 
    </span> 
</div>

如果你希望他們有在移動相同的單線結構，使用col-xs-2

Bootply

來源

2015-06-22 06:37:47

在桌面/平板電腦中連接一行，在移動設備中連接兩列？

回答

相關問題