Question

我正在一个非响应式网站上工作，我希望在col-xs-6中可以在彼此旁边放置一个图像和文本。只有当我使用display：inline-block它才能正常工作。

我认为使用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/

显示内联块不能在col-xs-6引导程序上运行

1 个答案: