Ik probeer een jaarbereikinvoer weer te geven op een formulier met 2 tekstvakken. Een voor de min en een voor de max en worden gescheiden door een streepje.
Ik wil dit allemaal op dezelfde regel met bootstrap, maar het lukt me niet om het correct te laten werken.
Hier is mijn code:
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
Zo ziet het er nu uit:
Antwoord 1, autoriteit 100%
Wat dacht je van een invoergroepom het op dezelfde regel te stylen?
Hier is de laatste HTML die moet worden gebruikt:
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
Dat ziet er zo uit:
Hier is een Stack Snippet-demo:
Antwoord 2, autoriteit 5%
@KyleMit’s antwoord op Bootstrap 4 is een beetje veranderd
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
Antwoord 3, autoriteit 2%
Het probleem is dat de klasse .form-controlwordt weergegeven als een div-element dat volgens de normal-flow-of-the-pagerendert op een nieuwe regel.
Een manier om dit soort problemen op te lossen, is door de eigenschap display:inlinete gebruiken. Maak dus een aangepaste CSS-klasse met display:inlineen koppel deze aan je component met een .form-control-klasse. Je moet ook een widthhebben voor je component.
Er zijn andere manieren om dit probleem aan te pakken (zoals het ordenen van uw form-controlcomponenten binnen een van de .colklassen), maar de gemakkelijkste manier is om gewoon uw .form-controleen inlineelement (zoals een spanzou renderen)
Antwoord 4
Voor Bootstrap 4
Antwoord 5
Bootstrap 3.3.7:
Gebruik form-inline.
Het werkt echter alleen op schermresoluties hoger dan 768px. Als u het onderstaande fragment wilt testen, klikt u op de link ‘Snippet uitvouwen’ om een groter weergavegebied te krijgen.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>Antwoord 6
Plaats gewoon twee ingangen in een div met class form-groupen stel display flex in op de div-stijl
<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
Antwoord 7
heb je de boostrap-website bekeken? zoek naar “formulieren”
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
Antwoord 8
@KyleMit-antwoord is een manier om dit op te lossen, maar we kunnen ervoor kiezen om de onverdeelde invoervelden te vermijden die worden verkregen door de klasse input-group. Een betere manier om dit te doen is door form-groupen rowklassen op een bovenliggende divte gebruiken en inputte gebruiken. elementen met grid-systeemklassen geleverd door bootstrap.
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>