Html Bootstrap 3 - 在同一行显示文本和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22561671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Display text and an image in the same row
提问by rahuL
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
我正在使用 BootStrap 3 框架创建一个网站。这是我遇到问题的代码部分：
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1><a href="index.html">Test Text.</a></h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
输出如下所示：
How do I get the image along the same row as the text? I tried placing the <img>within the col-md-8div tag, tried without specifying any coldiv value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
如何使图像与文本位于同一行？我想放置<img>的内col-md-8div标签，试图不指定任何colDIV值，但没有奏效。任何帮助表示赞赏。CSS 是通用的 bootstrap min css。
回答by Bielco
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
您可能希望将该区域分成两部分，但请始终记住引导程序标准使用 12 网格系统。
So if you want the two next to each other u use...
因此，如果您希望两者相邻，请使用...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
那应该可以解决您的问题，请记住计数超过 12。
回答by Billy Moat
Your columns have to always add up to a total of 12 and your code should be similar to the below:
您的列的总和必须始终为 12，您的代码应类似于以下内容：
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
仔细阅读其网格系统上的 Bootstrap 文档：
