Rắc rối với hình thức chồng chéo nội dung chồng chéo bằng cách sử dụng Twitter phản hồi Bootstrap

Question

Tôi đã dành nhiều thời gian hơn bao giờ hết để thừa nhận cố sửa lỗi này. Tôi có một biểu mẫu hiển thị bên trái của một số nội dung. Nó có vẻ ổn trên một màn hình rộng và hẹp, nhưng trên một máy tính bảng chiều rộng (nó chồng lên giữa 770 và 950 hoặc hơn) nội dung bên phải chồng lên các trường biểu mẫu.

Tôi có thiếu thứ gì đó trong đánh dấu để sử dụng Twitter Bootstrap đúng cách hay tôi cần thêm một số kiểu tùy chỉnh bằng cách sử dụng điểm ngắt để khắc phục? Có vẻ như chiều rộng pixel cố định đang gây ra sự cố được xác định trong bootstrap.css. Các thuộc tính chiều rộng này có nên sử dụng% vì tôi đang sử dụng bố cục đáp ứng chất lỏng không?

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <div class="promo-btm"> 
      <h2>Heading 2</h2> 
      <ul class="checks"> 
      <li>Bullet One</li> 
      <li>Bullet Two</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Xem ảnh chụp màn hình kèm theo cho các lỗi hoặc bạn có thể tái tạo nó cho mình sử dụng fiddle tôi.

Nếu ai đó có thể giúp chỉ ra một cách để khắc phục điều này, tôi sẽ cực kỳ đánh giá cao!

Answer 1

Chỉ cần thêm chiều rộng cho các yếu tố đầu vào của bạn để chúng có thể điều chỉnh đáp ứng với tất cả kích thước màn hình của bạn. Bạn có thể sử dụng giống như .span12 như có chiều rộng trên các yếu tố đầu vào của bạn và bạn cần khắc phục vấn đề:

HTML

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <h2>Heading 2</h2> 
     <ul class="checks"> 
      <li>Bullet One</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Demo: http://jsfiddle.net/yR7Ap/18/

Answer 2

Biểu mẫu của bạn quá rộng cho cột .span5. Thử thêm này trên:

<div class="row-fluid"> 
    <div class="span5">hello</div> 
    <div class="span7">world</div> 
</div> 

và thêm phong cách sau đây:

.row-fluid > div { outline: 5px solid green; } 

và bạn sẽ thấy những gì tôi có ý nghĩa.

Answer 3

Các bài viết khác đã xác định chính xác nguyên nhân gốc rễ của vấn đề, rằng biểu mẫu của bạn quá rộng đối với span5 div với mặc định bootstrap css

Nó không quá khó để làm cho nó phù hợp mặc dù. Xem nếu điều này giúp: http://jsfiddle.net/panchroma/FXXaZ/

Tôi đã thắt chặt lên mẫu của bạn với CSS này:

/* pull control label left */ 
.form-horizontal .control-label { 
width:70px; /* default 160 */ 
} 

/* pull input box left */ 
.form-horizontal .controls { 
margin-left: 90px; /* defaul 180 */ 
} 

/* shorten input box */ 
input, textarea, .uneditable-input { 
width: 180px; /* default 206 */ 
} 

Chúc may mắn!