引导4在不同行的图像下对齐块中的文本

Question

我有这个布局，虽然它是我想要的，我希望在图像下的行中的文本在一个块中直接对齐。

​

<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与样式如下，但这不是很有反应。我如何实现我的布局，并使它响应使用引导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>

​

Answer 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>

​