Làm thế nào để kích thước đầu vào của thanh công cụ bootstrap3 để lấp đầy với phần còn lại của không gian?

Question

Tôi muốn sử dụng nhóm đầu vào trong navbar-hình thức, như đoạn mã sau:

<form class="navbar-form navbar-left" role="search"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="product" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div> 
</form> 

Nó đã cố định kích thước khoảng 200px trong firefox. Tuy nhiên, trong chrome hoặc safari, tìm kiếm có một dòng hoàn toàn mới. Tôi muốn biết css bootstrap của kiểm soát chiều rộng của đầu vào.

input-group-btn có hai cài đặt css, display: table-cell; chiều rộng: 1%. Những cái này là gì?

Trong các tài liệu, thanh tìm kiếm mặc định là:

<form class="navbar-form navbar-left" role="search"> 
    <div class="form-group"> 
    <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

Nó hoạt động cả tốt trong firefox hoặc chrome, nhưng tôi muốn nó mất phần còn lại của không gian của thanh điều hướng. Giống như thanh tìm kiếm của facebook.

Tôi là một nhà phát triển cá nhân, tôi không giỏi ở thiết kế giao diện người dùng, Có ai biết gì về yêu cầu cụ thể này không?

Answer 1

Tôi vừa gặp sự cố tương tự.

Tôi sử dụng Safari và không may, phần tử biểu mẫu mất toàn bộ dòng (100% kích thước) (tuy nhiên trên Firefox, nó không có).

Sửa chữa đơn giản và dễ dàng sẽ chính xác đến độ rộng của biểu mẫu dưới 100%.

<form class="navbar-form navbar-left" style="width:40%" role="search"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="product" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div> 
</form> 

Lưu ý: width-40 lớp thay vì thuộc tính style không sửa chữa nó ... tuy nhiên không biết tại sao.

Answer 2

Bạn có thể thử một cái gì đó như thế này ... (ví dụ này cho thấy một cách để sử dụng bootstraps Navbar)

<div id="wrap"> 
<div class="navbar navbar-fixed-top" style="z-index:11000"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li> - your nave items would each be placed into here </li> 
      <li> - your nave items would each be placed into here </li> 
      <li> - your nave items would each be placed into here </li> 
     </ul>   
     </div> 
    </div> 
    </div> 
</div> 
</div> 

Bạn có thể đặt thẻ hình thức bên trong một trong các thẻ mục danh sách thay vì phân loại thanh nav như một hình thức.

Answer 3

Đó là lỗi của Chrome (xem here). Không cần sử dụng CSS cứng. Bạn có thể sửa chữa nó bằng cách:

.less

@media (min-width: @grid-float-breakpoint) { 
    .navbar-form { 
    .input-group-btn, 
    .input-group-addon { 
     width : auto; 
    } 
    } 
} 

hoặc .css

@media (min-width: 768px) { 
    .navbar-form .input-group-btn, 
    .navbar-form .input-group-addon { 
    width: auto; 
    } 
}