我有这个布局，虽然它是我想要的，我希望图像下面的行中的文本在一个块中直接对齐它。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
我设法在下面获得所需的布局。我插入了另一个div与下面的样式，但这不是很敏感。如何使用Bootstrap 4实现我的布局并使其响应？
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify ml-50 g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
答案 0 :(得分：1)
如果我能够正确理解您，那么以下是您想要的布局。该布局是完全响应的，可以通过在文本列中使用这些类来实现：
col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto
col-*类管理不同屏幕尺寸的列宽，px-*类管理水平填充，mx-auto水平居中列。
这是工作代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>