在引导4中使中心对齐的内容保持左对齐。

Question

我在卡片中间有文字，但我想让文字保持在中间，但沿着左边的直线。这是我have.Below想要的图像

​

​

​

我在列中有文本中心类，其中包含以文本为中心的卡片，但它们不在一行。这是密码。

<div class="container">
<p>Discover</p>
<hr >
<div class="row">

    <div class="col-sm-4 text-center" >
        <div class="card ">
            <div class="card-block ">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/foodposter.jpg">
                    </div>
                    <div class="col-7">
                        <p style="font-weight: bold;">Snail master</p>
                        <!-- <p><i class="material-icons" style="font-size: 0.8em;">info_outline</i>In Food and Drink</p> -->
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">today</i> 12 sept 2017</p>
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">location_on</i>TRM,Thika Road</p>
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">today</i> KSH.1200</p>
                        <p class="cardfont p-2">_</p>
                        <button  type="button" class="btn btn-outline-primary btn-2 " style="font-size: 0.8em;line-height: 80%;">Get Tickets</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4" >
        <div class="card">
            <div class="card-block">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/comedyposter.jpg">
                    </div>
                    <div class="col-7">mate</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4" >
        <div class="card">
            <div class="card-block">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/midnightposter.jpg">
                    </div>
                    <div class="col-7">mate</div>
                </div>
            </div>
        </div>
    </div>







</div>

​

Answer 1

最简单的方法是使用文本左代替文本中心。

给它一个新的类别，并给它左右平分，使它处于中心位置。

<div class="row">
<div class="col-4">
Image here
</div>
<div class="col-8 text-left">
<div class="xyz">
Snail master<br>
aaaaaa<br>
aaaaaaa
</div>
</div>

.xyz{
margin:0px 30px; as per your wish to make class in centre.
}

也可以使用偏移量。