Jquery 在bootstrap 2.3.2中设置表的列宽

我有一个使用Razor和bootstrap的c#项目，其中页面中有一个表，有几个列

现在，Bootstrap会自动设置每列的宽度，以便在表中占据相等的空间，但这并不理想

在我的表中，有些列包含更多信息，需要比其他列更宽

这并没有发生，结果，我得到了一个有两个图像的表，一个在另一个上面（当它们应该在同一行中时），看起来很可怕

我解决此问题的方法如下：

   <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Item Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach(Item anItemin Model.ItemsList){
            <tr>
                <td>
                    @anItem.Name
                </td>
                <td>
                    <div class="row-fluid">
                        <div class="span12">
                            <img class="span6" src="single_chevron/green.png" />
                            <img class="span6" src="single_chevron/white.png" />
                        </div>
                    </div>
                </td>
            </tr>
            }
        </tbody>
    </table>

项目名称
项目状态
@foreach（Item anItemin Model.ItemsList）{
@名称
}

现在，很明显，这个修复方案不起作用。我还尝试了

inline

、

forminline

、

container

和

input append

类，以强制图像保持在同一行上（而不是一行在另一行上），但没有任何效果

因此，基本上，我正在寻找两种解决问题的方法之一：

• 强制图像保持在同一行上
• 使引导中的第二列变大，这样图像就有足够的空间

---

是否有一种干净的方法来实现这些目标？

旧版本中的引导类需要考虑以下几点：

• 行

  应将

  span

  作为子行

• span

  可以将

  行

  作为子项，但不应将其他

  span

  作为直接子项以保留网格

• img

  标记对

  span

  类不太友好，因此请尽量避免使用它们

这些是可能的解决办法：

A.

B

C

.普通V形{高度：100px}
#单V形绿色{背景图像：url（single_chevron/green.png）}
#单V形白色{背景图像：url（single_chevron/white.png）}

---

对于这一个，你可能需要更多的CSS规则，比如

背景位置

，才能正确使用它们。

你能把它放在一个jsfiddle中，让其他人快速更改你的代码吗？你有没有尝试过使用2

div

（每个图像一个）而不是将

span6

放在

img

中？您仍然可以在每个

div

内使用

img

标记，或者将这些图像设置为

div

s背景（必须为

div

s设置特定高度）。。。这些方法也可以解决很多其他问题（至少对我来说是这样）。如果他们支持，请回答您自己的问题：）@blairmeister:因为stackoverflow和JSFIDLE都不支持Bootstrap 2.3.2作为库（仅支持角度）恐怕这样做是不可能的，除非我自己手动导入整个bootstrap 2.3.2库：S@Armfoot：为第二个图像设置另一个div将确保它位于第一个div之下，因为div的工作方式与段落类似。至于将图像设置为背景，由于第一个原因，它将不起作用。在我看来，我只能用1个div来解决这个问题。它会因为

span12

和2

span6

在里面而崩溃。

span6

仍具有排水沟宽度，其尺寸根据父

行流体计算。您可以（使用
alpha
和
omega
），也可以尝试以下方法之一。最好不要使用
alpha
和
omega
类。。。（如果您需要更新到新版本，则在使用它们时必须调整更多的代码）。
<div class="row-fluid">
    <div class="span6">
        <img src="single_chevron/green.png" />
    </div>
    <div class="span6">
        <img src="single_chevron/white.png" />
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <img src="single_chevron/green.png" />
            </div>
            <div class="span6">
                <img src="single_chevron/white.png" />
            </div>
        </div>
    </div>
</div>

<style>
.common-chevron {height: 100px}
#single-chevron-green {background-image: url(single_chevron/green.png)}
#single-chevron-white {background-image: url(single_chevron/white.png)}
</style>
<div class="row-fluid">
    <div id="single-chevron-green" class="span6 common-chevron">
    </div>
    <div id="single-chevron-white" class="span6 common-chevron">
    </div>
</div>