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

Question

我正在使用 Twitter Bootstrap 和 ASP.NET 编写我的第一个 Web 应用程序，后端使用 C#。我在 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 个其他面板应用相同的样式。

Answer 1

如果您想使用标准的 Bootstrap 样式，您可以为标签赋予 CSS 类“pull-left”和按钮“pull-right”。

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

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