Question

我有一个使用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>

现在，显然这个修复无效。我还尝试了类inline，form-inline，container和input-append来强制图像保持在同一条线上（而不是一条线在另一条线之上）但没有任何作用。

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

强制图像保持在同一行
在引导程序中使第二列更大，以使图像具有足够的空间

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

Answer 1

旧版本中的Bootstrap类需要考虑一些因素：

row应该有span作为孩子;
span可能有row作为孩子，但不应让其他span作为直接子项来保留网格;
img标记对span类不是很友好，因此请尽量避免使用它们。

这些是可能的解决方案：

A

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

C

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

对于这个，您可能需要更多CSS规则，例如background-position才能使它们正确。

在bootstrap 2.3.2

1 个答案:

A

乙

C