html - 如何在 bootstrap 网格系统中让两个 pull-right 元素一个在另一个下面？

Question

我的页面上有一个引导网格系统，我想将两个元素拉到右边，但一个放在另一个下面。这是我现在的代码。我希望“事件”和“主要”按钮一个放在另一个下方，但也向右拉。截至目前，它看起来像这样:

如果我要将它添加到按钮，那么它会正确对齐，但在移动设备上，它会搞砸。

<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>

这就是我目前所拥有的。我该怎么做才能达到预期的结果？

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-md-3">
            <h4>Dummy Name</h4>
            <small>Dummy Street</small><br>
            <small>Dummy Apt, Some City, Some State</small><br>
            <small>United States</small><br>
        </div>


        <div class="col-md-3">
            <h5>123-456-7890</h5>
        </div>

        <div class="col-md-3">
            <h5>some_name@somecompany.com</h5>
        </div>

        <div class="col-md-3">
            <h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
            <button type="button" class="btn btn-w-m btn-primary">Primary</button>
        </div>
    </div>
</div>

Answer 1

你根本不需要右拉 - 你只需要右对齐标题的文本，按钮是 text-align:right 在 css 或 text-父 div 上的 right 类。 请注意，由于预览窗口较小，您需要以“全屏模式”打开此代码段。

我还建议您将 css 放在它自己的样式表中，而不是内嵌样式规则。如果您使用 text-align: right 作为样式规则，那么您可以使用媒体查询来应用它或根据需要在特定屏幕尺寸上左对齐。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  	<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>
  
  
<div class="container"> 
  <div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-xs-3 col-md-3">
            <h4>Dummy Name</h4>
            <small>Dummy Street</small><br>
            <small>Dummy Apt, Some City, Some State</small><br>
            <small>United States</small><br>
        </div>


        <div class="col-xs-3 col-md-3">
            <h5>123-456-7890</h5>
        </div>

        <div class="col-xs-3 col-md-3">
            <h5>some_name@somecompany.com</h5>
        </div>

        <div class="col-xs-3 col-md-3 text-right">
            <h2>Active</h2><br>
            <button type="button" class="btn btn-w-m btn-primary">Primary</button>
        </div>
    </div>
  </div>
</div>