부트 스트랩 정렬 행 및 여백

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> 

현재보기 : 나는 당신의 문제를 이런 식으로 해결했습니다

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> 

하고이 결과, 당신은 어쨌든 당신이 지금 쉽게 원하는이를 조정할 수 : 을 나는 스타일이 없기 때문에 결과의 버튼 아래에 제대로 표시되지 않습니다.

나는 당신을 도움이되기를 바랍니다.