Question

我正在使用Bootstrap 4 Alpha 5，我有以下HTML：

<div class="home-content">
    <div class="container">
        <div class="row flex-items-xs-middle">
            <div class="col-md-7">
                <h1 class="site-title text-xs-center text-md-left">
                    <span class="name">I'm Shivam Paw</span>
                    <span class="title">I create beautiful and bespoke websites to fit your needs</span>
                </h1>
            </div>
            <div class="col-md-5">
                <img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
            </div>
        </div>
    </div>
</div>

但是，如果您看到下面的图像，则会看到内容未对齐到左侧。我在SO上看到了一个帖子，但它说你必须将行类放在我已经完成的容器中。

您可以在https://www.shivampaw.com

看到该网站

我查看了.row CSS，左边和右边的边距为-15px。删除这些边距修复它但我不认为它应该如何？

Answer 1

如果这是您的期望，那么请查看您的CSS。这是以您的内容为中心的行

＆＃13;

.text-xs-center {
    text-align: center!important;
}

＆＃13;

这应该解决它

＆＃13;

.site-title {
    font-size: 36px;
    color: white;
    font-weight: bold;
    text-align: left !important;
}

＆＃13;

Answer 2

原来我的style.css中有一些违规的CSS：

*, img.full-size{
    max-width: 100%;
}

将其更改为：

img.full-size{
    max-width: 100%;
}

解决了问题。

BootStrap行未对齐

2 个答案: