2 个 inline-table div 之间的图像 - 不适用于 bootstrap

Question

我正在做一些游戏内物品交易网站，这在这里并不重要。
我的实际代码是：

<div class="trade">
        <h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
        </div>

        <div class="arrow">
            <img src="http://i.imgur.com/dusRcnt.png" />
        </div>

        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
                <span class="item-rarity">Battle-Scared</span>
                <div class="red"></div>
            </div>
        </div>
    </div>

JSFIDDLE

如您所见，箭头与其余箭头的高度不同。但是，如果我将删除 bootstrap（删除第一个 html 行），它就可以正常工作。问题是，我需要在我的网站上使用 bootstrap。我该如何解决？

Answer 1

检查这个 - https://jsfiddle.net/7curr49y/1/

我所做的更改是这些 -

.items-holder
{
    background-color: #E7E7E7;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    border-collapse: separate;
    border-spacing: 10px 0px;
    vertical-align:middle;
}

将 "inline-table" 更改为 "inline-block" 并添加了 "vertical-align:middle"。

希望对您有所帮助！

2 个 inline-table div 之间的图像 - 不适用于 bootstrap

image between 2 inline-table divs - doesn't work with bootstrap

html

css

statistics-bootstrap