显示内联块不工作在col 6引导程序上。
显示内联块不工作在col 6引导程序上。
提问于 2014-12-11 11:23:51
我在一个没有响应的网站上工作，在那里我想拥有一个图像和文本，在一个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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-11 11:29:01
对每个元素使用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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27421701
复制相关文章
相似问题
腾讯云开发者
