Bootstrap - 垂直单选按钮未对齐

Posted 2023-03-06

【中文标题】Bootstrap - 垂直单选按钮未对齐

【英文标题】：Bootstrap - Vertical Radio Buttons not aligned

【发布时间】：2019-01-28 03:40:27

【问题描述】：

一旦屏幕尺寸达到一定尺寸（在本例中，手机为 768 像素），我就会遇到堆叠单选按钮的问题。我有这个本地 @media 覆盖，它采用 radio-inline 并将其显示为一个块 - 但是，一旦我这样做，第一个单选按钮“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>

【参考方案1】：

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

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

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

【讨论】：

我试试这个。谢谢！