Question

我正在尝试将按钮对齐在中间位置。当前我想要的文本在我的按钮旁边，并且居中。我一直在尝试在每种可能的组合中放置行，并且我试图以各种方式集中处理东西，但只是不能正确。目前，我被迫使用<br>来使所有这一切保持在同一行。但必须有一种方法可以解决这个问题。如果我尝试删除pull-right，则只需更改行而不是将其自身放在按钮旁边。

代码：

<ItemTemplate>
    <td>
        <div class="list-group-item">
        <a href="<%# "http://" + Eval("URL") %>" class="list-group-item col-md-5"><%# Eval("URL") %></a>
        <asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton>
            <div class="pull-right">
            <asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
            <asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>   
            </div>
        <br />
        <asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton>
        </div>
     </td>
</ItemTemplate>

目前看： Current

Answer 1

我已经通过这种方式解决了您的问题，请尝试一下，看看它是否有效。

    <style>
        a.lnk-content, .lbl-score  {
            display:block;
            margin-left: 30px; /* adjust this based on your requirement*/
            margin-top: 10px;  /* adjust this based on your requirement*/
        }
    </style>

<td style="border: 1px solid black; height: 50px;">
    <div class="row">
        <div class="col-xs-7"> <!-- adjust the columns based on your needs -->
            <a href="#" class="lnk-content">this is my link</a>
        </div>
        <div class="col-xs-5"> <!-- adjust the columns based on your needs -->
            <div class="pull-left">
                <div><asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton></div>
                <div><asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton></div>
            </div>
            <div class="lbl-score">
                <asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
                <asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
            </div>
        </div>
    </div>
</td>

这就是结果，你现在可以轻松地调整它：下面结果上的按钮不能正确显示，因为我没有这些样式。

enter image description here

我希望它可以帮到你。

与行和边距对齐的Bootstrap

1 个答案: