Question

有人请帮助我理解如何为图像中的输入制作我的boostrap代码。我不知道如何使一个输入更大而另一个更小。我尝试输入较小但不起作用。

我希望两个内联输入总共具有与firt输入相同的宽度。

这是我的代码HTML + Bootstrap

<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">N du registre de commerce</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="tva" placeholder="Saisissez votre numero RC">
	</div>
</div><!--form-group-->

<div class="form-group">
	<label for="inputEmail3" class="col-sm-5 control-label">Personne autorisee a signer</label>
	<div class="col-sm-5">
		<label class="radio-inline">
	        <input type="radio" name="yes3"  checked>Oui
	    </label>
	    <label class="radio-inline">
	        <input type="radio" name="no3">Non
	    </label>	
	</div>
</div><!--form-group-->

<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">Rue / Numero</label>
    <div class="col-sm-7">
    	<div class="form-group">
    		<div class="col-sm-6">
    			<input type="text" class="form-control" id="street" >
    		</div>
    		<div class="col-sm-1">
    			<input type="text" class="form-control" id="street-nr" >
    		</div>	
    	</div>
	</div>
</div><!--form-group-->

<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">Code postal / Ville</label>
    <div class="col-sm-7">
    	<div class="form-group">
    		<div class="col-sm-6">
    			<input type="text" class="form-control" id="zip-code" >
    		</div>
    		<div class="col-sm-1">
    			<input type="text" class="form-control" id="street" >
    		</div>
    	</div>
	</div>
</div><!--form-group-->

Answer 1

看起来你错过了<div class="row"></div>为每个部分提供它，然后尝试一下。

更新：我添加了更多的行和列，以使宽度与第一行相同。 N du registre de commerce

 <div class="row">
<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">Personne autorisee a signer</label>
    <div class="col-sm-5">
        <label class="radio-inline">
            <input type="radio" name="yes3"  checked>Oui
        </label>
        <label class="radio-inline">
            <input type="radio" name="no3">Non
        </label>    
    </div>
</div></div><!--form-group-->

 <div class="row">
<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">Rue / Numero</label>
    <div class="col-sm-6">
        <div class="row" style="margin: 0px; padding: 0px;">
                <div class="col-sm-6" style="margin: 0px; padding: 0px;"><input type="text" class="form-control" id="street" ></div>
                <div class="col-sm-4" style="margin: 0px; padding: 0px;"><input type="text" class="form-control" id="street-nr"></div>
        </div>
        </div>
</div></div><!--form-group-->

 <div class="row">
<div class="form-group">
    <label for="inputEmail3" class="col-sm-5 control-label">Code postal / Ville</label>
    <div class="col-sm-6">
        <div class="form-group">
        <div class="row" style="margin: 0px; padding: 0px;">
            <div class="col-sm-4" style="margin: 0px; padding: 0px;"><input type="text" class="form-control" id="zip-code" ></div>
            <div class="col-sm-6" style="margin: 0px; padding: 0px;"><input type="text" class="form-control" id="street" ></div>
        </div>
        </div>
    </div>
</div></div><!--form-group-->

Bootstrap两个输入内联不同的widh

1 个答案: