Bootstrap表单对齐，不会向右拉
我有一个不想对齐的表单。
我试图在附加图像上显示我想要对齐的行，希望它有所帮助。
我希望右手文本框向右拉（根据图像上的蓝线，当我将其添加到类中时不起作用），以及要填充的下拉框，以便它们的大小与文本框（根据图像上的绿线）。
以下代码：）
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<div class="form-inline">
<div class="form-group row">
<div class="col-md-6">
<asp:TextBox ID="txtFirstname" runat="server" CssClass="form-control loan-form-textbox" placeholder="förnamn"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="txtLastname" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="efternamn"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control loan-form-textbox" placeholder="personnummer"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="email"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control loan-form-textbox" placeholder="hemnummer"></asp:TextBox>
</div>
<div class="col-sm-6">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="mobilnummer"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddCivilstand" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Gift" Value="1"></asp:ListItem>
<asp:ListItem Text="Singel" Value="2"></asp:ListItem>
<asp:ListItem Text="Skild" Value="3"></asp:ListItem>
<asp:ListItem Text="Änka/Änkeman" Value="4"></asp:ListItem>
<asp:ListItem Text="Separerad" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddEmploymentType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="0"></asp:ListItem>
<asp:ListItem Text="Fast anställd" Value="1"></asp:ListItem>
<asp:ListItem Text="Egen företagare" Value="2"></asp:ListItem>
<asp:ListItem Text="Visstidsanställd" Value="3"></asp:ListItem>
<asp:ListItem Text="Pensionär" Value="4"></asp:ListItem>
<asp:ListItem Text="Student" Value="5"></asp:ListItem>
<asp:ListItem Text="Arbetslös" Value="6"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddChildren" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddAccomnodationType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="1"></asp:ListItem>
<asp:ListItem Text="Hyresrätt" Value="2"></asp:ListItem>
<asp:ListItem Text="Bostadsrätt" Value="3"></asp:ListItem>
<asp:ListItem Text="Inneboende" Value="4"></asp:ListItem>
<asp:ListItem Text="Villa/Radhus" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control loan-form-textbox" placeholder="boendekostnad"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:Button ID="btnApply" runat="server" Text="Ansök nu" CssClass="btn btn-primary pull-right" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
Bootstrap列的右侧和左侧都有填充，这意味着右侧的对齐不会位于边缘。要对齐右边缘，请将style="padding-right: 0;"添加到您需要向右拉的元素（如果您使用的是类而不是内联代码.col-pull-right{padding-right: 0;}
框大小调整问题应该通过删除
中的form-inline类来解决<div class="form-inline">
这里是完整的代码。注意我已经使用了上面代码的最终html元素。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<!-- can be replaced by col-md-offset-2 on element below it -->
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<!-- remove class form-inline from here -->
<!--<div class="form-inline"> -->
<div>
<div class="form-group row">
<div class="col-md-6">
<input ID="txtFirstname" class="form-control loan-form-textbox" placeholder="förnamn"/>
</div>
<div class="col-md-6">
<input ID="txtLastname" class="form-control loan-form-textbox pull-right" placeholder="efternamn"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox3" class="form-control loan-form-textbox" placeholder="personnummer"/>
</div>
<div class="col-md-6">
<input ID="TextBox4" class="form-control loan-form-textbox pull-right" placeholder="email"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<input ID="TextBox1" class="form-control loan-form-textbox" placeholder="hemnummer"/>
</div>
<div class="col-sm-6">
<input ID="TextBox2" class="form-control loan-form-textbox pull-right" placeholder="mobilnummer"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px; padding-right: 0">
<div class="col-sm-6">
<select ID="ddCivilstand" class="form-control loan-form-textbox">
<option value=""> Gift</option>
<option value=""> Singel</option>
<option value=""> Skild</option>
<option value=""> Änka/Änkeman</option>
<option value=""> Separerad</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddEmploymentType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Fast anställd</option>
<option value=""> Egen företagare</option>
<option value=""> Visstidsanställd</option>
<option value=""> Pensionär</option>
<option value=""> Student</option>
<option value=""> Arbetslös</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<select ID="ddChildren" class="form-control loan-form-textbox">
<option value=""> 1</option>
<option value=""> 2</option>
<option value=""> 3</option>
<option value=""> 4</option>
<option value=""> 5</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddAccomnodationType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Hyresrätt</option>
<option value=""> Bostadsrätt</option>
<option value=""> Inneboende</option>
<option value=""> Villa/Radhus</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox5" class="form-control loan-form-textbox" placeholder="boendekostnad"/>
</div>
<div class="col-md-6">
<button ID="btnApply" class="btn btn-primary pull-right">Ansök nu</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？