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。

将此添加到jsFiddle的CSS部分，单词将按预期进行换行。

添加了text-align注意到发短信保持居中而你不想这样，所以添加额外的css text-align：left！important; ！important会覆盖bootstrap css默认值。

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

我还更新了原来的jsFiddle

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将容器类更改为container-fluid。

然后在井内使用带有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>