显示内联块在 col-xs-6 引导程序上不起作用

Question

>我正在一个非响应式网站上工作，我想在 col-xs-6 中有一个图像和文本彼此相邻。只有当我使用显示：内联块时，它才不起作用。

我以为使用 li 会让它工作，但它没有。在阻止内联块的 col-xs-6 中会发生什么？希望这些信息足以帮助我获得解决方案。

你可以在这里找到我的小提琴 http://jsfiddle.net/robin2609/h0hoss1o/2/

这是我的代码：

        <div class="col-xs-12 item-background">             
          <div class="row" style="  border:1px solid red; float:none; display:inline-block;">
            <div class="col-xs-6">              
                <h2 class="items">Test</h2>             
                <ul>
                    <li style="display:inline-block;  border:1px solid red;">
                        <img src="http://placehold.it/120x120">
                    </li>
                    <li style="display:inline-block;  border:1px solid red;">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor                 incididunt uLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u
                    </li>
                </ul>                                       
            </div>          
            <div class="col-xs-6">              
                <h2 class="items">Test</h2>             
                <ul>
                    <li style="display:inline-block;  border:1px solid red;">
                        <img src="http://placehold.it/120x120">
                    </li>
                    <li style="display:inline-block;  border:1px solid red;">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor                 incididunt uLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u
                    </li>
                </ul>                                       
            </div>          
        </div>
    </div>

Answer 1

对每个元素使用 col-xs-XX 而不是 display:inline，这样它们就会彼此相邻放置。确保每行的col-xs-XX加起来总共为 12 行。

<div class="col-xs-12 item-background">
    <div class="row" style="  border:1px solid red; float:none; display:inline-block;">
        <div class="col-xs-6">
            <h2 class="items">Test</h2> 
            <div class="col-xs-6" style="border:1px solid red;">
                <img src="http://placehold.it/120x120" />
            </div>
            <div class="col-xs-6" style="border:1px solid red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u</div>
        </div>
        <div class="col-xs-6">
            <h2 class="items">Test</h2> 
            <div class="col-xs-6" style="border:1px solid red;">
                <img src="http://placehold.it/120x120" />
            </div>
            <div class="col-xs-6" style="border:1px solid red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u</div>
        </div>
    </div>
</div>

这是您更新的小提琴：http://jsfiddle.net/h0hoss1o/8/