css - Bootstrap - 垂直单选按钮未对齐

Question

一旦屏幕尺寸达到一定尺寸(在本例中，手机为 768 像素)，我就会遇到堆叠单选按钮的问题。我有这个本地@media 覆盖，它采用单选内联并将其显示为一个 block - 但是，一旦我这样做，第一个单选按钮“0”略有偏移并且与其下方的其余部分不对齐。有任何关于变通的想法，或者我是否做错了什么？

 <style>
@media  (max-width: 768px){ 
      .radio-inline{
      display:block;
      }
}

</style>  

<div class="container-fluid">
  <div class="jumbotron">
    <div>
        <asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE 
        TEXT"/>
        <br />
        <br />
        <asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
    </div>
    <div class="row" style="padding-bottom: 30px;">
        <div class="col-lg-12">
            <label class="radio-inline">
             <input type="radio" name="A1" value="0" required> <b>0&nbsp 
               &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="1" required> <b>1&nbsp 
              &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="2" required> 
               <b>2&nbsp &nbsp</b>
            </label>
      </div>
  </div>
</div>

Answer 1

您需要从每个输入中删除空格“ ”。这应该可以解决此代码片段中所示的问题。如果需要间距，请使用 CSS。

https://jsfiddle.net/tbuchanan/Lqj412tu/

    <label class="radio-inline">
         <input type="radio" name="A1" value="0" required> <b>0</b>
    </label>