ブートストラップフォームの整列、右に引っ張らない

自分自身を整列させたくないフォームがあります。ブートストラップフォームの整列、右に引っ張らない

添付画像にどのように配置したいのかを線で表示しようとしました。

右手のテキストボックスをプル右にしたい（イメージの青い線に従って、クラスに追加すると機能しません）、入力するボックスをドロップして同じサイズにしますテキストボックスとして（画像の緑色の線ごとに）表示されます。 :)

<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>

出典

2017-04-30 Robert Benedetto

ブートストラップ列以下

コードが左右にパディングを有し、これは右に整列するエッジにならないであろうことを意味します。あなたは（あなたがインラインコードではなく、クラスを使用する場合、それが良いだろう右引っ張る必要がある要素にstyle="padding-right: 0;"を追加し、右端に整列させる.col-pull-right{padding-right: 0;}問題サイジングボックスが

でフォームインラインクラスを削除することによって解決すべき

ここ

<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>

出典

2017-04-30 16:06:48

いいえ、didnt work –

ボックスのサイズを変更したり、右に引っ張ったりしますか？ –

は私のテストコードを追加しました。小さな画面に入力フィールドを適切に配置するために、 'col-sm-6'で' form-group'クラスを使うことを検討してください。 –

ブートストラップフォームの整列、右に引っ張らない

答えて

関連する問題