使用 Bootstrap 和 ASP.NET 在面板内左对齐文本但右对齐按钮答案

【问题标题】：Left align text but right align button inside of a panel using Bootstrap and ASP.NET使用 Bootstrap 和 ASP.NET 在面板内左对齐文本但右对齐按钮
【发布时间】：2014-06-09 04:52:48
【问题描述】：

我正在使用 Twitter Bootstrap 和 ASP.NET 在后端使用 C# 编写我的第一个 Web 应用程序。我在 Bootstrap 面板中有按钮和标签。我想将标签向左对齐，按钮向右对齐。到目前为止，这是我的代码：

    <div class="panel panel-primary">  
                    <div class="panel-heading">
                        <h3 class="panel-title">Overview</h3>   
                    </div>
                    <div class="panel body">
                        <p>
                            <asp:Label ID="BandsProducedLabel" runat="server" Text="Bands Produced:"></asp:Label>
                            <asp:Button class="btn btn-default" ID="BandsProducedBtn" runat="server" Text="Hello" style="text-align:right" />
                        </p>
                   <\div>
    <\div>

我怎样才能完成这项任务？这只是一小段代码。我还有大约 15 个其他面板，我想对其应用相同的样式。

【问题讨论】：

标签： c# html css asp.net twitter-bootstrap

【解决方案1】：

如果你想使用标准的 Bootstrap 样式，你可以给标签指定 CSS 类“pull-left”和按钮“pull-right”。

为了获得正确的结果，您可能必须颠倒源顺序，即在标记中先出现按钮，然后是标签。

另一种选择是使用 Bootstrap 网格系统将这两个元素并排放置。

【讨论】：

我更喜欢panel-primary 类的外观，所以我只添加了pull-right 类中的以下代码行：float: right !important;