一旦屏幕尺寸达到特定尺寸（在这种情况下，手机为 768px），我就会遇到堆叠单选按钮的问题。我有这个本地@media 覆盖，它接受单选内联并将其显示为一个块 - 但是，一旦我这样做，第一个单选按钮“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 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>
您需要从每个输入中删除空格“ ”。这应该可以解决此代码片段中所示的问题。如果您需要间距，请使用 CSS。
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句