1. 首頁
  2. 問答
  3. 不對齊正確

不對齊正確

2014-01-23 158 views
1

這裏引導表單組是我指得代碼：http://jsfiddle.net/Rn9ne/1/不對齊正確

如果擴展輸出窗口，使他們不堆積，你可以看到，右邊的列略搞砸。左側和右側具有相同的代碼和相同的列跨度。

<div class="col-md-9"> 
<div class="col-md-9 col-md-offset-3"> 
     <div class="page-header"> 
      <h3>Your Profile</h3> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">    <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Name</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Email</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">[email protected]</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">01258989</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <input class="form-control input-block" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </form></div> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Name</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Email</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">[email protected]</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">01258989</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <input class="form-control input-sm" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </div>

來源

2014-01-23 Jonnerz

回答

2

使用此HTML - http://jsfiddle.net/Rn9ne/3/

您需要添加類 「形橫」 右擋上。

<div class="col-md-9"> 
<div class="col-md-9 col-md-offset-3"> 
    <div class="page-header"> 
     <h3>Your Profile</h3> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">    <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Name</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">Jon</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Email</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">[email protected]</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">01258989</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <input class="form-control input-block" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-6 form-horizontal"> 
      <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Name</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">Jon</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Email</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">[email protected]</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <p class="form-control-static">01258989</p> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
       <div class="col-sm-8 col-sm-pad"> 
        <input class="form-control input-sm" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-md-offset-9"><input class="btn btn-lg btn-success btn-block" type="submit" value="Save"></div> 
    </div> 
</div>

來源

2014-01-23 17:52:39

0

我相信「form-group」類在FORM標籤內工作。這是你想要達到的目標嗎？

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="page-header"> 
       <h3>Your Profile</h3> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">    
        <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Name</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Email</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">[email protected]</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">01258989</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <input class="form-control input-block" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </form> 
      </div> 
      <div class="col-md-6"> 
       <form role="form"> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Name</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Email</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">[email protected]</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Phone</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">01258989</p> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <input class="form-control input-sm" name="gender" type="text">      </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-4 control-label col-sm-pad">Player Type</label> 
        <div class="col-sm-8 col-sm-pad"> 
         <p class="form-control-static">Jon</p> 
        </div> 
       </div> 
      </form> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <input class="btn btn-lg btn-success btn-block" type="submit" value="Save"> 
      </div> 
     </div> 
    </div> 
</div> 
</div>

http://jsfiddle.net/stevenng/Rn9ne/4/

來源

2014-01-23 17:56:39 Steve

+0

的小提琴是或多或少相同的原有配置。它仍然破碎。 –

相關問題

 相關問題