CSS nào kiểm soát lề phải và lề trái giữa các phần tử biểu mẫu này trong Twitter Bootstrap?

Question

Tôi không thể tìm ra điều gì kiểm soát lợi nhuận giữa các thành phần biểu mẫu nội tuyến này. Ví dụ, lề giữa hai trường nhập văn bản.

EDIT: Tôi biết cách kiểm soát để thay đổi những lợi nhuận này, nhưng tại sao lại có một khoảng trống giữa chúng. Tôi không thể tìm thấy bất kỳ CSS trong bootstrap chịu trách nhiệm cho các lề 3 hoặc 4px giữa chúng vào lúc này.

Answer 1

Sau đây là các bộ chọn CSS, bạn sẽ cần ..

Margin đầu vào/lĩnh vực:

.form-inline .form-group { 
    margin: 0px 10px; /* Add something like this */ 
} 

Margin cho nút checkbox/radio:

.form-inline .radio, .form-inline .checkbox { 
    margin: 0px 10px; /* Add something like this */ 
} 

Ký quỹ cho nút gửi:

.bs-example > .btn, .bs-example > .btn-group { 
    margin: 0px 10px; /* Add something like this */ 
} 

Margin cho toàn bộ hình thức inline

.bs-example { 
    margin: 0px 30px; /* Add something like this */ 
} 

Và để trả lời câu hỏi của bạn, hiện nay có lợi giữa các yếu tố, bởi vì đó là mặc định. Nếu bạn muốn loại bỏ chúng, tôi sẽ đề nghị làm điều này bằng tay bằng cách thêm các lề tiêu cực vào các điều khiển CSS mà tôi đã chỉ định ở trên. Ví dụ, nếu bạn muốn loại bỏ bên lề giữa các đầu vào, làm như sau:

.form-inline .form-group { 
    margin: 0px -3px; /* Add a negative margin to remove it*/ 
} 

Answer 2

Ngắm HTML mã cần thiết cho các hình thức

<form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputEmail2">Email address</label> 
     <input type="email" class="form-control" id="exampleInputEmail2" 
     placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputPassword2">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword2" 
     placeholder="Password"> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox">Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Sign in</button> 
</form> 

ví dụ để đặt lề hơn sau khi đầu vào các trường, bạn có thể:

form.form-inline div.form-group { 
margin-right: 10px; 
} 

Tương tự, bạn có thể thực hiện thủ thuật tương tự cho các thành phần khác (ví dụ: cho hộp kiểm form.form-inline div.checkbox, cho nút gửi form.form-inline button)

Answer 3

Tôi hiểu những gì bạn đang bối rối. Bạn muốn biết lý do tại sao có một khoảng cách giữa hai lĩnh vực đầu vào.

Để câu trả lời đó thực sự nằm trên lớp biểu mẫu gốc bs-example form-inline. Ở đó nếu bạn kiểm tra bằng cách sử dụng chromebug của firebug hoặc crromes, thì bạn sẽ thấy một kiểu như sau: .bs-example {margin: 0 -15px 15px;}. Bây giờ đây là phần kiểm soát không gian giữa hai trường đầu vào cá nhân. Nếu bạn chặn điều đó bằng cách sử dụng lỗi lửa hoặc lỗi chrome, thì bạn sẽ thấy rằng các trường thực sự nằm dưới một trường khác và đó là lề này cùng với vị trí vertical-align giữ cả hai vị trí đó ở đúng vị trí.

Answer 4

Khoảng cách giữa các yếu tố đầu vào trên tài liệu của Bootstrap là do không gian màu trắng trong HTML. Hãy nhớ rằng .form-group được đặt thành khối nội tuyến, nhạy cảm với không gian màu trắng.

Đối với một cuộc biểu tình, xem http://jsfiddle.net/kvcrawford/Rs54Q/1/

Bạn có thể sửa chữa nó với một số CSS như sau:

.form-inline-space-fix .form-group { 
    margin-right: 4px; 
} 
.form-inline-space-fix .form-group:last-child { 
    margin-right: 0; 
}