Twitter bootstrap 对齐响应列中的按钮和文本

全页抓取：

需要布局的单柱抓斗：

这是页面级别col-sm-4的一部分。然后在其中添加另一行以进行对齐

我需要按钮保持右对齐-文本保持在这样一个块的左侧（而不是在文本中有按钮）

我可以使用col-sm-8和col-sm-4来实现这一点，在我们达到最窄的非移动尺寸之前，它工作得很好。然后按钮对于该列来说太宽，它溢出到div之外

我在这里寻找一个优雅的解决方案——也许不使用列。列并不是真正相关的-我只是希望文本在按钮的任何宽度范围内，比如说，20像素

我在谷歌上找不到任何东西——我甚至不确定该搜索什么

什么是最佳实践、响应友好的方法

下面的代码使用列方法（这似乎有缺陷）：

文章放在这里就可以了
如果需要，请检查两行
阅读更多

图一：

---

您可以尝试以下方法

@介质（最小宽度：768px）{
.文本持有者{
浮动：左；
右键填充：20px；//按钮的位置将始终为20px
}
.按钮座{
浮动：对；
}
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。
按钮

更新：

<div class="row">
  <div class="col-sm-7 col-md-8">
      Article to go in here and can
      go over two lines if needed
  </div>
  <div class="col-sm-5 col-md-4">
      <button class="btn btn-default btnlight" type="submit">Read more</button>
  </div>
</div>

文章放在这里就可以了
如果需要，请检查两行
阅读更多

因此，对于较小的窗口大小（768px~992px），按钮将具有较大的容器。

查看此代码

HTML

<div class="row">
<div class="col-sm-8 col-xs-8">
    Article to go in here and can
    go over two lines if needed
</div>
<div class="col-sm-4 col-xs-4">
    <button class="btn btn-default btnlight" type="submit">Read more</button>
</div>

文章放在这里就可以了
如果需要，请检查两行
阅读更多

---

你能分享你的代码吗？完成-上面分享的代码你可以看到同样的问题-在某一点上，按钮变得太宽，无法使用column@niico按钮的宽度保持不变，宽度不调整。对于移动设备，你需要按钮看起来仍然很小吗？按钮的宽度保持不变-但柱在较窄的宽度处较窄-并溢出柱外-这在移动宽度处不会发生-但在最窄的非移动宽度处基本上我认为你走的路与yuyokk相同-尽管在xs尺寸下我很高兴按钮转到另一行。这不起作用。别忘了它都在主页的col-sm-4中。此代码将col-sm-4中的内容设置为整页宽度。如果按钮对于col-sm-4来说太宽，则“使用”按钮将具有更大的col-sm-5容器。请您详细解释。这就是为什么我建议您在开始时使用自己的holder类。或者尝试为更多@grids定制引导。因此，您将对COL的大小有更多的控制。谢谢-您是否忘记应用您的类-或者它们不再与此示例相关？

<div class="row">
  <div class="col-sm-7 col-md-8">
      Article to go in here and can
      go over two lines if needed
  </div>
  <div class="col-sm-5 col-md-4">
      <button class="btn btn-default btnlight" type="submit">Read more</button>
  </div>
</div>

<div class="row">
<div class="col-sm-8 col-xs-8">
    Article to go in here and can
    go over two lines if needed
</div>
<div class="col-sm-4 col-xs-4">
    <button class="btn btn-default btnlight" type="submit">Read more</button>
</div>