Question

如何调整行中单元格的大小，使其高度相等且所有字符都适合它们？这就是现在一行的样子：请注意日语列中的小字符。牢房不够高，无法容纳它们。此外，英语列中单元格的高度小于旁边单元格的高度。

我希望行看起来像这样：

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

这是我的CSS和HTML代码：

<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>

Answer 1

我认为问题是课程.en-buffer和.jp-buffer

尝试使用padding 代替 margin ...

/* 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 {
  padding: 10px;
}
.jp-buffer {
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-6 header ">
    <h1>Japanese</h1>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 header ">
    <h1>English</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-6 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-6 en-buffer">Do you have curry powder at your house?</div>
</div>

Bootstrap 3：调整div行中单元格的大小

1 个答案: