Ẩn văn bản nút ở chế độ điện thoại - Bootstrap

Question

Tôi đang tạo một ứng dụng mà tôi muốn ẩn văn bản nút để tiết kiệm không gian có giá trị trong "chế độ điện thoại". Tất cả các nút đều có biểu tượng, do đó, điều đó là đủ.

Tôi muốn có một giải pháp css thuần túy, nhưng tôi không thể nghĩ ra bất cứ điều gì.

Đây là những gì một nút trông giống như:

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"><i class="icon-save"></i> Save</button> 

Tôi muốn nói thêm rằng nó cũng có thể là một:

<a class="btn btn-warning"><i class="icon-trash"></i> Delete</a> 

Vì vậy, về cơ bản, nếu chế độ của phản ứng là điện thoại, tất cả các văn bản bên trong bộ chọn .btn sẽ bị ẩn. Nhưng biểu tượng cần phải ở lại.

Tôi đã thử text-ident, nhưng điều đó cũng ẩn biểu tượng.

Answer 1

Tôi muốn sử dụng lớp khởi động twitter tích hợp .hidden-phone.

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"> 
      <i class="icon-save"></i> <span class="hidden-phone">Save</span> 
    </button> 

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 2

Đây có phải là điều bạn muốn không?

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"> 
    <i class="icon-save icon-white"></i> 
    <span class="hidden-phone">Save</span> 
</button> 

Đảm bảo bạn đã bao gồm bootstrap-responsive.css nếu không hoạt động.

Answer 3

Trong bootstrap 3 lớp hidden-phone là changed-hidden-xs. Vấn đề thực tế, hidden- hiện có thể được sử dụng với các tiền tố kích thước thiết bị khác như lg, sm v.v ...