引导程序's网格布局没有并排放置图像和文本.请告诉我我在做什么;我做错了吗

Question

我从事web开发只有几个月大，我知道我的代码很简单，但我已经尝试了我所知道的一切，但都不起作用。如果我将图像的宽度增加到100%，则文本和图像不会并排对齐。我也希望图像离开屏幕。这是我的html代码(删除图像，因为我不能发布它(。我的css代码只包含width=100%;和overflow:hidden;

<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>

<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>

Answer 1

我没有足够的声誉发表评论，所以我会把它作为答案发布。

1. 可以肯定的是，您使用的是col-lg-6，因此在大屏幕及以上之后，列将占50%。如果您看到的是一个小屏幕，那么您需要col-md-6或col-sm-6，或者如果您想要2列，则只需要col-6。

2. 如果您已经知道了，那么将类img-fluid添加到您的图像中。这应该会成功的。这是Bootstrap类，用于使图像具有响应性。引导响应图像

我在附加的JSFiddle链接上尝试过，请确保展开显示框以使-lg断点生效。