html - 固定宽度 element using twitter bootstrap

Answer 1

HTML <code> element is an inline wrapper. In order to apply width, you need to change type of display to block or inline-block:

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

In this case, you won't need to wrap <code> elements by <div>:

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

Here is the JSBin Demo.

Update

First I should note that I used margin property before only for the previous demo, remove that. Also, It's better to reset line-height property of <code> elements:

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

TW Bootstrap applies a margin-bottom property to its .progress element. Reset the margin in your stylesheet if needed:

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

However, in this case I think it's better to place each line in a separate row (<tr>).
I created a Demo on the basis of your posted image.

Here is the JSBin Demo #2.

Answer 2

Before:

After:

I'd like to keep the height of the original "before" version, as this fits with the rest. Editing height doesn't seem to do the trick properly :S