html - の固定幅 element using twitter bootstrap

Answer 1

HTML<code>要素はインラインラッパーです。widthを適用するには、ディスプレイのタイプをblockまたはに変更する必要がありますinline-block。

td code {
  display: block;
  width: 70px;
  margin: 2px 0;
}

この場合、次のように<code>要素をラップする必要はありません<div>:

<table>
  <tr>
    <td>
        <code>-1245</code>
        <code>-12455</code>
        <code>-1245</code>
        <code>-1245</code>
        <code>-1245</code>
    </td>
  </tr>
</table>

これがJSBin Demoです。

アップデート

margin最初に、以前のデモでのみプロパティを使用していたことに注意してください。それを削除します。また、要素line-heightのプロパティをリセットすることをお勧めします:<code>

td code {
  display: block; /* Or inline-block */
  width: 50px;
  line-height: 1;
}

TW Bootstrap は、その要素にmargin-bottomプロパティを適用します。必要に応じて、スタイルシートのマージン.progressをリセットします。

.progress {
  margin: 0; /* <-- Override Bootstrap default style */
}

ただし、この場合は各行を別の行に配置する方がよいと思います ( <tr>)。
投稿された画像に基づいてデモを作成しました。

JSBin デモ #2を次に示します。