Tách ngang và dọc các nút của Twitter Bootstrap

Điều gì gây ra các nút của Twitter Bootstrap bị tách ngang?Tách ngang và dọc các nút của Twitter Bootstrap

enter image description here

Tôi không thể tìm thấy mã này trong mã CSS.

Tôi đang cố gắng để lặp lại rất tương tự cho thẳng đứng, nhưng có vẻ như tôi đang thất bại trong việc đạt được điều này:

enter image description here

Làm thế nào tôi có thể thêm tách theo chiều dọc giữa các nút, chỉ khi họ được xếp chồng lên nhau theo chiều dọc (ảnh thứ hai), nhưng tránh cùng (không cần thiết trong trường hợp này), khi chúng không phải (ảnh đầu tiên)?

EDIT: Mã sử dụng để tạo ra hình ảnh trên:

<div class="container-fluid"> 

    <div class="row-fluid"> 

     <div class="well well-small" id="menu-buttons"> 

      <div class="pull-left" style="width: 48%"> 

       <a class="btn btn-small">@ Style ^</a> 
       <a class="btn btn-small">@ Language ^</a> 

      </div> 

      <div class="pull-right text-right" style="width: 48%;"> 

       <a class="btn btn-small">@ Device</a> 
       <a class="btn btn-small">@ Webpage</a> 

      </div> 

      <div style="clear: both"></div> 

     </div> 

    </div> 

</div>

Nguồn

2013-07-23 trejder

Nó sẽ được dễ dàng hơn để trả lời rằng nếu bạn đã cho thấy mã của bạn. Đoán của tôi là đây là một cái gì đó để làm với phao nổi, xem từ thanh tra web cho dù các nút "@ Thiết bị" và "@ Trang web" có một giá trị nổi được xác định. – quinnirill

bao bọc các nút đó trong một 'div' với' inline-block'. Nếu nó là do sử dụng phao 'clear: both' – Praveen

@quinnirill: Xin lỗi, vì đã bỏ lỡ. Đây là câu hỏi được cập nhật với mã. – trejder

gì tôi sẽ làm là một cái gì đó như thế này:

.btn { 
    margin: 2px; 
} 
.well { 
    padding: 7px; 
}

Vì vậy, tôi addedd một lề của 2px xung quanh mỗi nút, và giảm padding của container (.well) bởi 2 pixel. Bằng cách này, phong cách 'chiều rộng đầy đủ' của bạn vẫn không thay đổi và phong cách 'thu hẹp' giờ đây sẽ có khoảng cách 4 pixel giữa các nút.

Bạn có thể muốn quảng cáo một id thêm hoặc một cái gì đó ở phía trước của những selectors, để làm cho nó chỉ làm việc trên của bạn "# menu-nút"

Và một ví dụ: http://jsfiddle.net/eHYnQ/

Nguồn

2013-07-23 13:04:25 Pevara

Con người, có vẻ như giải pháp ROCKS của bạn! Hãy để tôi làm một số kiểm tra nhiều hơn, nhưng nó thực sự trông đầy hứa hẹn. – trejder

Tôi không hiểu lý do tại sao bootstrap không có một số lớp để chuẩn bị đầu lề –

Bạn có thể làm điều đó bằng cách thêm một tài sản margin-bottom để nút của bạn. Trong bức ảnh đầu tiên, nó có thể là một float: right; với một margin-right: 5px;

Nguồn

2013-07-23 12:08:49

Đây là điều đầu tiên, tôi nghĩ và nó sẽ không hoạt động. Việc thêm 'margin-bottom' vĩnh viễn (trong cả hai trường hợp) sẽ tạo ra không gian bổ sung không thể chấp nhận được giữa các nút và đường viền dưới của giếng bao quanh chúng, trong trường hợp đầu tiên (khi các nút không được xếp chồng lên nhau theo chiều dọc). – trejder

Bạn có thể cố gắng xây dựng dựa trên những điều sau đây:

#menu-buttons a:first-child { 
    margin-bottom: 3px; 
}

(Bộ chọn là công khai cụ thể, bạn nên làm một cái gì đó về điều đó)

Nguồn

2013-07-23 12:22:08 quinnirill

Điều này sẽ không hoạt động - xem nhận xét của tôi về câu trả lời của Amine ở trên. Hoạt động tốt, khi các nút được xếp chồng lên nhau theo chiều dọc, nhưng trông xấu xí (nút thứ nhất và thứ hai trong mỗi nhóm được căn chỉnh sai), khi chúng không được xếp chồng lên nhau và tất cả đều nằm trong một dòng. – trejder

Khi kiểm tra mã của bạn, bạn có cặp nút được ghép bên trong một div.

Vì vậy, thay vì phải % thay đổi giá trị cho px

<div class="pull-left" style="width: 115px; "> <a class="btn btn-small">@ Style ^</a> 
<a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 115px;"> <a class="btn btn-small">@ Device</a> 
<a class="btn btn-small">@ Webpage</a> 

</div>

Kiểm tra này JSFiddle

Cập nhật: Như bạn nêu trong ý kiến về thiết kế chất lỏng, đây là một cách đơn giản để thực hiện việc đó trong HTML <br/> thẻ để có dấu ngắt dòng.

<div class="pull-left" style="width: 38% "> <a class="btn btn-small">@ Style ^</a> 
    <br/> <a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 38%"> <a class="btn btn-small">@ Device</a> 
    <br/> <a class="btn btn-small">@ Webpage</a> 

</div>

Updated Fiddle

Nguồn

2013-07-23 12:48:30 Praveen

Như bạn có thể thấy (các lớp 'container-fluid' và' row-fluid' ở các div hàng đầu), đây là một bố cục lỏng, do đó, cho các giá trị tuyệt đối bằng pixel không phải là một tùy chọn. Nhận xét bên: Tôi đã mở jsFiddle của bạn và không thấy sự tách biệt theo chiều dọc trong cả hai nhóm nút. – trejder

@trejder bạn có chắc jsfiddle của tôi không hoạt động không? – Praveen

@trejder Kiểm tra câu trả lời cập nhật của tôi. – Praveen

Đó là lớp row-fluid người gây ra lề theo chiều ngang.
Bạn có thể tạo row-fluid trong một row fluid để có khoảng cách dọc.
Xem bootstrap - fluidGridSystem khi Làm tổ lỏng.

Bạn cũng nên sử dụng span lớp để sửa chiều rộng

Fiddle: here
màn hình:

Screen capture

Đây là mã của tôi:
Cảnh báo Tháo <div class="span3" style="background-color:whitesmoke"> cho toàn màn hình rộng div

<!Doctype html> 
<html> 
<head> 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> 
</head> 
<body> 
     <div class="span3" style="background-color:whitesmoke"> 
      <div class="row-fluid"> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>1</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">2</button> 
        </div> 

       </div> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>3</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">4</button> 
        </div> 

       </div> 

      </div> 
     </div> 
</body> 
</html>

Nguồn

2013-07-23 12:50:38 Done

Tôi đặt mã của bạn bên trong của tôi, có và không có xung quanh nó với 'container-fluid', và trong cả hai trường hợp, tôi thấy một số kết quả lạ - mỗi nút nằm trong một hàng riêng biệt. Có lẽ tôi đang thiếu một cái gì đó? Điều này là hoàn toàn không, những gì tôi đang tìm kiếm. Kết quả hoàn toàn khác so với hình ảnh của tôi. Bạn có một số fiddle để trình bày, rằng giải pháp của bạn thực sự hoạt động. – trejder

Ah, tôi hiểu rồi. Linh hồn của bạn hoạt động hoàn hảo trên các độ phân giải màn hình rộng. Nhưng không hoàn toàn trên thiết bị di động. – trejder

http://jsfiddle.net/TJUcg/ – Done

Tách ngang và dọc các nút của Twitter Bootstrap

Trả lời

Các vấn đề liên quan