在响应列中对齐按钮和文本

Question

整页抓取宽度：

需要布局的单列抓取：

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

我需要按钮保持右对齐 - 并且文本保持在这样的块中（不要在文本中包含按钮）。

我可以使用col-sm-8和col-sm-4来实现这个目标，直到我们达到最窄的非移动尺寸。然后该按钮对于该列来说太宽，它会溢出div。

我在这里寻找一个优雅的解决方案 - 也许是不使用列的东西。列并不是真正相关的 - 我只想让文本进入任意宽度的按钮20px。

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

什么是最佳实践，反应灵敏的方法？

以下代码使用列方法（看起来有缺陷）：

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

FIG1：

Answer 1

您可以尝试类似

的内容

http://plnkr.co/edit/oZ2ActtFiSaaaCvK23gM?p=preview

<style>
  @media (min-width: 768px) {
    .text-holder {
      float: left;
      padding-right: 20px; // you will have 20px always of the button
    }

    .button-holder {
      float: right;
    }
  }
</style>

<div class="container">
  <div class="clearfix">
    <div class="text-holder">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

    <div class="button-holder">
      <button class="btn btn-default">Button</button>
    </div>
  </div>
</div>

更新：

<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）按钮将有更大的容器。

Answer 2

查看此代码

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

http://jsfiddle.net/vasanthanvas/42nod42d/