ngăn bảng bootstrap rộng hơn khoảng

Dưới đây là nội dung thường được tạo động. Trong phần chính của trang có một số <div class="span6">. Đôi khi bảng trong div này trở nên rộng hơn bản thân div (tôi đã kiểm tra css, chiều rộng được đặt thành 100%). Nếu tôi chỉ đặt văn bản ngắn vào bàn, hoặc nếu tôi làm cho div rộng hơn tất cả mọi thứ là tốt. Câu hỏi là:ngăn bảng bootstrap rộng hơn khoảng

Tại sao bảng có thể rộng hơn div class=spanX? Tôi luôn luôn nghĩ rằng, một yếu tố khối có chiều rộng của cha mẹ của nó?
Số lượng ký tự/dấu cách trong td tương ứng của bảng có thể thay đổi. Làm cách nào để ngăn bảng phát triển rộng hơn div? Tất nhiên tôi có thể tự động kiểm tra số lượng ký tự trong một số ts nhưng tôi phải làm gì với thông tin này?

http://jsfiddle.net/vNnc6/

HTML:

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<meta charset="utf-8"> 
<title>MySite</title> 
<meta name="author" content="me"/> 

<link href="static/css/bootstrap.css" rel="stylesheet"> 
<link href="static/css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="static/profhase.css" rel="stylesheet"> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script> 


<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 

    <ul class="nav"> 
     <li><a class="brand" href="profhase">MyBrand</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Blog</a></li> 
    </ul> 

     <div class="nav pull-right collapse nav-collapse" style="hight: 0px"> 
     <ul class="nav collapse nav-collapse"> 
      <li><p class="navbar-text">Apps: </p></li> 
      <li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li> 
     </ul> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="container-fluid"> 
    <div class="row"> 
     <div class="span2"> 
    <p> 
     My Wonderful sidebar 
    </p> 
     </div> 
     <div class="span6" style="background:red;"> 
    <table class="table"> 
     <tbody> 
     <tr> 
      <th>Header1</th> 
      <th>Header2</th> 
      <th>Header3</th> 
      <th>Header4</th> 
      <th>Header5</th> 
      <th>Header6</th> 
     </tr> 

     <tr> 
      <td>My first Test</td> 
      <td>My second Test</td> 
      <td>My third Test</td> 
      <td>My fifth Test</td> 
      <td>My lalalalalong long lelong long long Test</td> 

      <td> 
     <div class="btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown"> 
      Dropdown Choices <span class="caret"></span> 
      </a> 

      <ul class="dropdown-menu"> 
      <li><a id=1>First wonderful choice</a></li> 
      </ul> 

     </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
     </div> 
    </div> 
    </div> 

</body>

Nguồn

2013-05-25 ProfHase85

Nhờ có câu trả lời bằng FelipeAls mã này đã làm nó:

table { 
    table-layout: fixed; 
    word-wrap: break-word; 
}

Một khả năng khác là không sử dụng ngắt từ nhưng có cái gì đó như ...

http://jsfiddle.net/zzmfA/

Nguồn

2013-05-26 12:02:35 ProfHase85

tôi nhận thấy phụ huynh của span6 được hiển thị như table nhưng span6 được thả nổi. Loại bỏ các phao và thiết lập span* để display: table-cell công trình: fiddle
Lưu ý: có thể có một lớp học phù hợp hơn span* trong TB, một lớp học mà đã có display: table-cell.
giải pháp khác, nhưng có lẽ không phải những gì bạn muốn đạt được: kỹ thuật "một phần tử với overflow: hidden; cùng với một yếu tố nổi": Working fiddle
Lời giải thích của ma thuật này được đặt tên block formatting context (T. J. Koblentz' blog)-question on SO

Nguồn

2013-05-25 20:06:09 FelipeAls

ngăn bảng bootstrap rộng hơn khoảng

Trả lời

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