Кнопки Bootstrap переполнены, нужно обернуть и выровнять

Question

Я пытаюсь получить мои ссылки, которые в стиле с 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, и вы увидите, что я имею в виду.

Кроме того, любое решение должно позволять каналам перемещаться слева направо при большей ширине экрана. Эта проблема переполнения происходит только при узкой ширине экрана.

Answer 1

К сожалению, не был уверен, как вы хотите его отформатировать.

Я дважды проверяю ваш jsFiddle, который вы предоставили.

Добавьте это в CSS-часть jsFiddle, и слова обернутся, как ожидалось.

Добавлено text-align заметило, что текстовый объект остался центрированным, и вы этого не хотите, поэтому добавьте дополнительный CSS-выравнивание: left! Important; Важно! Переопределяет значения по умолчанию bootstrap 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>

Answer 2

Измените класс контейнера на контейнерную жидкость.

Затем в колодце используйте группу списка с кнопкой li с классом 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>