Question

我正在使用自举网格系统进行单选按钮，我正试图将它们展开，看起来并没有让对方卡住。有人请帮助我如何使用网格系统设置吗？

这是我尝试过的： http://jsfiddle.net/75qmj037/11/

<div id="ownership" class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <label class='radiolabel'>
        <input type="radio" name="ownership" required="yes" value="MCO" />Manufacturer's statement of origin</label>
        <label class='radiolabel'>
        <input type="radio" name="ownership" value="FL Title" />Florida certificate of title</label>
        <label class='radiolabel'>
        <input type="radio" name="ownership" value="OOS Title" />Out-of-state certificate of title</label>
        <label class='radiolabel'>
        <input type="radio" name="ownership" value="TN Required" />I do not have any of these</label>
    <!---Label is here for placement of error message--->
    <label for="ownership" class="error" style="display:none;">Please choose one.</label>
        </div>
    </div>
</div>

Answer 1

应该能够将每个人放在像<div col-lg-2>这样的div中。请注意，您使用的lg只会在桌面上显示，如果您希望在所有设备上使用xs，或者为每个屏幕尺寸指定不同的列{{1} }和sm。

md

Answer 2

好吧，在这里，我把每个单独的收音机放在 col-md-4 网格中。这意味着在媒体屏幕中将显示其中的3个。如果你想要显示它们，你可以将它设为 col-md-3 ，这意味着在中等屏幕中显示4个

   <div id="ownership" class="row">
            <div class="form-group">
                <div class="col-md-4">
            <label class='radiolabel'>
            <input type="radio" name="ownership" required="yes" value="MCO" />Manufacturer's statement of origin</label>
                </div>
                <div class="col-md-4">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="FL Title" />Florida certificate of title</label>
                </div>
                <div class="col-md-4">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="OOS Title" />Out-of-state certificate of title</label>
                </div>
                <div class="col-md-4">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="TN Required" />I do not have any of these</label>
                </div>
        <!---Label is here for placement of error message--->
        <label for="ownership" class="error" style="display:none;">Please choose one.</label>
            </div>
        </div>

Answer 3

只需添加：

 .radiolabel input {
  margin-right:20px;
  margin-left: 20px;
}

＆＃13;

 .radiolabel input {
  margin-right:20px;
  margin-left: 20px;
}

＆＃13;

<div id="ownership" class="row">
    	<div class="col-lg-12">
    		<div class="form-group">
    			<label class='radiolabel'>
    		<input type="radio" name="ownership" required="yes" value="MCO" />Manufacturer's statement of origin</label>
    		<label class='radiolabel'>
    		<input type="radio" name="ownership" value="FL Title" />Florida certificate of title</label>
    		<label class='radiolabel'>
    		<input type="radio" name="ownership" value="OOS Title" />Out-of-state certificate of title</label>
    		<label class='radiolabel'>
    		<input type="radio" name="ownership" value="TN Required" />I do not have any of these</label>
    	<!---Label is here for placement of error message--->
    	<label for="ownership" class="error" style="display:none;">Please choose one.</label>
        	</div>
    	</div>
    </div>

＆＃13;

Answer 4

<div id="ownership" class="row">
        <div class="col-lg-12">
            <div class="form-group">
        <div class="col-xs-6">

                <label class='radiolabel'>
            <input type="radio" name="ownership" required="yes" value="MCO" />Manufacturer's statement of                          origin</label>

        </div>
        <div class="col-xs-6">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="FL Title" />Florida certificate of title</label>
           </div>

        <div class="col-xs-6">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="OOS Title" />Out-of-state certificate of title</label>
           </div>
              <div class="col-xs-6">
            <label class='radiolabel'>
            <input type="radio" name="ownership" value="TN Required" />I do not have any of these</label>
        </div>
        <div class="col-xs-6">
        <!---Label is here for placement of error message--->
        <label for="ownership" class="error" style="display:none;">Please choose one.</label>
            </div>
        </div>
       </div>
    </div>

Answer 5

这可能应该做的工作。尝试一下

#ownership .radiolabel input[type="radio"] {
display:inline-block;
margin-right:4px; /*or whatever distance from buttom to text*/
margin-left:4px; /*if you want to add some space at the left of the radio button also*/
    }

使用引导网格系统传播单选按钮

5 个答案: