Bootstrap网格无法正常工作

Question

我正在尝试使用下面的代码将图像和文本元素对齐。但是，文本目前位于图像下方。有人可以向我解释如何使用bootstrap网格将文本对齐到图像的一侧吗？

<div class = "container-fluid">
 <div class = "jumbotron">
  <div class = "row">
    <div class = "col-md-6">
      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSob_6cmEpG703Y4LtxHwGyfnJCi8Dul4Cvg78-73EDQY9bP8hf">
    </div>
    <div class = "col-md-6">
      <p>Insert blurb here</p>
    </div>
  </div>
</div>
</div> 

Answer 1

<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSob_6cmEpG703Y4LtxHwGyfnJCi8Dul4Cvg78-73EDQY9bP8hf" />
</div>
 <div class="col-md-6">
 <p>Insert blurb here</p>
 </div>
</div>
</div>
</div>   

Answer 2

检查bootstrap的版本。它应该根据需要显示与文本对齐的图像。但是你的第一类选择器“.container-fluid”不应该有句号“。”字符。

Answer 3

尝试以下可能对您有帮助的HTML代码。

＆＃13;

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
<div class="container-fluid">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-6 col-xs-6">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSob_6cmEpG703Y4LtxHwGyfnJCi8Dul4Cvg78-73EDQY9bP8hf" />
      </div>
      <div class="col-md-6 col-xs-6">
        <p>Insert blurb here</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

将.pull-left类赋予图像，将.pull-right赋予div文本并将.pull-right赋予图像

这是代码

<div class = "container-fluid">
            <div class = "jumbotron">
                <div class = "row">
                    <div class = "col-md-6 pull-left">
                        <img class="pull-right" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSob_6cmEpG703Y4LtxHwGyfnJCi8Dul4Cvg78-73EDQY9bP8hf">
                    </div>
                    <div class = "col-md-6 pull-right">
                        <p>Insert blurb here</p>
                    </div>
                </div>
            </div>
        </div>