使用引導網格創建表格中的問題

我想使用引導網格系統生成表格。在我創建的用於生成表格的html代碼之下，但它不能正常工作，因爲表格單元格在768px的屏幕尺寸上重疊。使用引導網格創建表格中的問題

.row.header { 
 
    height: 44px; 
 
    border-top: 1px solid #CCCCCC; 
 
    border-top-right-radius: 5px; 
 
    border-top-left-radius: 5px; 
 
    background-color: #F3F3F3; 
 
} 
 
p.block-space { 
 
    margin: 15px 0 16px 0px; 
 
} 
 
div[class^="col"] > label { 
 
    margin: 15px 0 16px 0px; 
 
    text-align: center; 
 
    font: normal 14px Helvetica; 
 
    color: #666666; 
 
} 
 
.col-margin-header { 
 
    margin-left: 10px !important; 
 
} 
 
.col-margin { 
 
    margin-left: 15px !important; 
 
} 
 
.xs-col-margin { 
 
    margin-left: 5px !important; 
 
} 
 
dt.heading { 
 
    font: bold 14px Helvetica; 
 
    text-align: left; 
 
    color: #333333; 
 
} 
 
.dd-description { 
 
    font: normal 14px Helvetica; 
 
    color: #666666; 
 
} 
 
@media (min-width: 320px) { 
 
    div[class^="col"] { 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
@media (min-width: 768px) { 
 
    div[class^="col"] { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
/* Medium devices (desktops, 992px and up) */ 
 

 
@media (min-width: 992px) { 
 
    div[class^="col"] { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
/* Large devices (large desktops, 1200px and up) */ 
 

 
@media (min-width: 1200px) { 
 
    /*default so you don't need this*/ 
 
    div[class^="col"] { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Example of Bootstrap 3 Grid System</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <br/> 
 
    <br/> 
 
    <div class="row header visible-sm-block visible-md-block"> 
 
     <div class="col-sm-1 col-md-1"> 
 
     <label class="col-margin-header">Select</label> 
 
     </div> 
 
     <div class="col-sm-11 col-md-11"> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Bank</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Agent</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Company</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Division</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Department</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Bank</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Agent</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Company</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Division</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Department</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-1 col-sm-1 col-md-1"> 
 
     <p class="block-space col-margin visible-sm-block visible-md-block"> 
 
      <input type="radio" /> 
 
     </p> 
 
     <p class="block-space xs-col-margin visible-xs-block"> 
 
      <input type="radio" /> 
 
     </p> 
 
     </div> 
 
     <div class="col-xs-11 col-sm-11 col-md-11"> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Bank</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Agent</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Company</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Division</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Department</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Bank</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Agent</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Company</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Division</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Department</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

這個代碼是臺式機的問題是一個768px屏幕尺寸上workign罰款。

來源

2015-07-03 Smita Ture

「不能正常工作」是無意義的陳述。 *期望的*行爲是什麼，你取而代之的是什麼*？ – Siguza

不工作意味着表格單元格重疊。 –

爲什麼不使用表格表 – albert

我同意你使用div作爲佈局，因爲Bootstrap中的表是非常痛苦的。但是，我認爲它的原因是重疊的，因爲單元對於內容來說太小了。

你因此有幾個選項：

首先是添加「溢出：隱藏;」到會隱藏額外的內容，但阻止它重疊列：

div[class^="col"] { 
    overflow:hidden; 
}

https://jsfiddle.net/4sxogckb/

但是，這是一種毫無意義的，因爲你不能讀取數據。

接下來，您可以強制長字打破：

div[class^="col"] { 
    word-break: break-all; 
}

https://jsfiddle.net/8swd3km5/

然而，這是相當醜陋。

最後，您最好的解決方案是重新審視設計，並嘗試提出一種在小型屏蔽設備上顯示不顯示11列表格的數據的方法。

來源

2015-07-03 14:42:09

使用引導網格創建表格中的問題

回答

相關問題