Html 引导3：调整div行中单元格的大小_Html_Css_Twitter Bootstrap

Html 引导3：调整div行中单元格的大小

html css twitter-bootstrap

Html 引导3：调整div行中单元格的大小,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,如何调整一行中单元格的大小，使其高度相等，并且所有字符都适合它们？这是当前行的外观：注意日文栏中的小字符。牢房不够高，容纳不了他们。此外，英文列中单元格的高度小于其旁边单元格的高度我希望该行看起来像这样：背景看起来像一个长长的绿色矩形以下是我的CSS和HTML代码： /*用于小屏幕*/ .行：第n个子项（偶数）{ 背景色：#FFFFFF； } .行：第n个孩子（奇数）{ 背景色：#D0E9C6； } /*对于中等屏幕*/ @介质（最小宽度：768px）{ .行：第n个子项（4n），

如何调整一行中单元格的大小，使其高度相等，并且所有字符都适合它们？这是当前行的外观：注意日文栏中的小字符。牢房不够高，容纳不了他们。此外，英文列中单元格的高度小于其旁边单元格的高度

我希望该行看起来像这样：

背景看起来像一个长长的绿色矩形

以下是我的CSS和HTML代码：


/*用于小屏幕*/
.行：第n个子项（偶数）{
背景色：#FFFFFF；
}
.行：第n个孩子（奇数）{
背景色：#D0E9C6；
}
/*对于中等屏幕*/
@介质（最小宽度：768px）{
.行：第n个子项（4n），.行：第n个子项（4n-1）{
背景色：#FFFFFF；
}
.行：第n个子项（4n-2），.行：第n个子项（4n-3）{
背景色：#D0E9C6；
}
}
/*用于大屏幕*/
@介质（最小宽度：992px）{
.行：第n个子项（6n），.行：第n个子项（6n-1），.行：第n个子项（6n-2）{
背景色：#FFFFFF；
}
.行：第n个孩子（6n-3），.行：第n个孩子（6n-4），.行：第n个孩子（6n-5）{
背景色：#D0E9C6；
}
}
.header，h1{背景色：#FFFFFF！重要}
.en缓冲区{页边距顶部：10px；页边距右侧：10px}
.jp缓冲区{上边距：10px；左边距：10px}
日本英语
カレー粉(こ)は家(いえ)にあるの?你家里有咖喱粉吗？

我认为问题在于类

.en buffer

和

.jp buffer

尝试使用

填充

代替

边距

/*适用于小屏幕*/
.行：第n个子项（偶数）{
背景色：#FFFFFF；
}
.行：第n个孩子（奇数）{
背景色：#D0E9C6；
}
/*中等屏幕*/
@介质（最小宽度：768px）{
.行：第n个孩子（4n），
.行：第n个子项（4n-1）{
背景色：#FFFFFF；
}
.第行：第n个孩子（4n-2），
.行：第n个孩子（4n-3）{
背景色：#D0E9C6；
}
}
/*用于大屏幕*/
@介质（最小宽度：992px）{
.第行：第n个孩子（6n），
.世界其他地区：第n个孩子（6n-1），
.世界其他地区：第n个孩子（6n-2）{
背景色：#FFFFFF；
}
.世界其他地区：第n个孩子（6n-3），
.行：第n个孩子（6n-4），
.世界其他地区：第n个孩子（6n-5）{
背景色：#D0E9C6；
}
}
.标题，
h1{
背景色：#FFFFFF！重要
}
.en缓冲区{
填充：10px；
}
.jp缓冲区{
填充：10px；
}


日本人
英语
カレー
粉
(
こ
)は
家
(
いえ
)にあるの?
你家里有咖喱粉吗？

这里有一个可能的解决方案：您能给行背景上色，而不是列上色吗？@BJ Peter DeLaCruz希望能帮上忙！谢谢，@Alvaro！确实如此。：-）

<style type='text/css'>
/* For small screen */
  .row :nth-child(even){
  background-color: #FFFFFF;
}
.row :nth-child(odd){
  background-color: #D0E9C6;
}

/* For medium screen */    
@media (min-width: 768px) {
  .row :nth-child(4n), .row :nth-child(4n-1) {
    background-color: #FFFFFF;
  }
  .row :nth-child(4n-2), .row :nth-child(4n-3) {
    background-color: #D0E9C6;
  }
}

/* For large screen */
@media (min-width: 992px) {
  .row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
    background-color: #FFFFFF;
  }
  .row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
    background-color: #D0E9C6;
  }
}

.header, h1 { background-color: #FFFFFF !important}
.en-buffer  { margin-top: 10px; margin-right: 10px }
.jp-buffer  { margin-top: 10px; margin-left: 10px }
</style>

</head>

<body>

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12 header jp-buffer"><h1>Japanese</h1></div><div class="col-md-4 col-sm-6 col-xs-12 header en-buffer"><h1>English</h1></div>
</div>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12 japanese jp-buffer"><ruby lang="jp">カレー</ruby><ruby lang="jp">粉<rp>(</rp><rt>こ</rt><rp>)</rp>は</ruby><ruby lang="jp">家<rp>(</rp><rt>いえ</rt><rp>)</rp>にあるの?</ruby></div><div class="col-md-4 col-sm-6 col-xs-12 english en-buffer">Do you have curry powder at your house?</div>
</div>