引導按鈕溢出很好，需要包裝和對齊

我試圖讓我的鏈接，它與btn btn-link風格環繞和垂直排列在左側，當視口縮小到大約iPhone 4的大小：引導按鈕溢出很好，需要包裝和對齊

<div class="well well-sm"> 

     <a href="" class="btn btn-link">link</a> 

</div>

我研究其他的答案，我已經嘗試添加white-space:normal到<a>標籤。但後來我得到這個：

但是，這不是真的不夠好。它需要包裝，然後像原稿一樣在左側垂直排列。我該怎麼做呢？

的jsfiddle：
https://jsfiddle.net/vk7fftku/4/
（！我的第一個）

收縮瀏覽器（視口）到的，比方說，一個iPhone的寬度，你會明白我的意思。

此外，任何解決方案都應該允許鏈接以較大的屏幕寬度從左向右流動。這種溢出問題只發生在窄屏幕寬度上。

來源

2016-11-15 nmit026

你有其他的CSS？你可以發佈一個[JSFiddle]（https://jsfiddle.net/）來重現問題。 – Steve

沒有其他的CSS，只有父元素是'容器'。我現在會做一個jsfiddle。 – nmit026

對不起不太知道你如何想它格式化。

我仔細檢查你提供的jsFiddle。

將此添加到jsFiddle的CSS部分，單詞將按預期方式換行。

添加文本對齊注意到，發短信保持中心，你不想這樣，所以添加額外的CSS文本對齊：左！重要; ！important重寫引導程序的CSS默認值。

a { 
    white-space: normal !important; 
    text-align: left !important; 
}

我也更新了我原來的jsFiddle

a { 
 
    white-space: normal !important; 
 
    text-align: left !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="well well-sm"> 
 

 
     <a href="" class="btn btn-link">link is really long and won't wrap on small screens</a> 
 
     
 
     <a href="" class="btn btn-link">link</a> 
 

 
</div>

來源

2016-11-15 05:14:54 jameswassinger

你絕對是血腥的傳奇。你讓我今天很開心！非常感謝！'text-align：left'現在看起來非常明顯，但我懷疑我很快就會想出來。當引導程序不做我想要的，我總是努力奮鬥，我試圖重寫它，它總是覺得它不應該被混淆。我不喜歡用'！important'，但我想你必須在這樣的情況下。謝謝！ – nmit026

將容器類更改爲容器流體。

然後在井內使用帶有li按鈕的list-group btn btn-link和list-group-item。

然後文本將按預期包裝。

這裏是jsFiddle

.container-fluid { 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="well well-sm"> 
 
    <div class="list-group"> 
 
    <button type="button" class="list-group-item">Accommodation - Holiday and Business</button> 
 
    <button type="button" class="list-group-item">Advertising Space</button> 
 
    <button type="button" class="list-group-item">Agriculture, Farming, Fishing and Forestry</button> 
 
    <button type="button" class="list-group-item">Aircraft</button> 
 
    <button type="button" class="list-group-item">Appliances - Domestic</button> 
 
    <button type="button" class="list-group-item">Automotive Equipment</button> 
 
</div> 
 
    
 
    </div> 
 
</div>

來源

2016-11-15 03:57:25 jameswassinger

無論屏幕的大小如何，這似乎總是垂直堆疊一切？ – nmit026

引導按鈕溢出很好，需要包裝和對齊

回答

相關問題