Question

我有两个div使用bootstrap并排居中。一个div text-right对齐，另一个text-left。我试图得到它，以便当页面变得很小以便并排查看时，它们会彼此重叠。我已经尝试在CSS中使用@media规则来处理这个但没有运气。有什么建议？到目前为止，HTML看起来像这样：

<div class="container-fluid">
    <div class="col-md-3 col-md-offset-3 text-right">
        <p class="summary">Some summary text</p>
    </div>
    <div class="col-md-3 text-left">
        <p class="description">An extended description</p>
    </div>
</div>

UPDATE！

与两个div有关的CSS：

/* Summary text */
.summary {
    font-family: 'Stint Ultra Expanded', cursive;
    font-size: 1.5em;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.8;
}
/* Description text */
.description {
    font-family: 'Slabo 13px', serif;
    font-size: 1.1em;
    color: #ffffff;
    opacity: 0.8;
}

@media screen and (max-width: 300px) {
    .summary,
    .description {
        text-align: center;
    }
}

Answer 1

300px的最大宽度太小而无法触发。如果您使用.col-md-3，那么这两列将占据从992px开始到更低的全屏宽度。请参阅Bootstrap Docs on Media Queries

@media (max-width: 992px) {
    .summary,
    .description {
        text-align: center;
    }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="col-md-3 col-md-offset-3 text-right">
        <p class="summary">Some summary text</p>
    </div>
    <div class="col-md-3 text-left">
        <p class="description">An extended description</p>
    </div>
</div>

如果你想要小于992像素，你可以使用.col-sm-3或.col-xs-3，或者甚至通过将它们包装在媒体查询中来提出你自己的自定义列宽。

Answer 2

为您的列添加一个id，因为这将在您的css中更具体，并覆盖Bootstrap css。

<div class="container-fluid">
    <div id="column-one" class="col-md-3 col-md-offset-3 text-right">
        <p>Some summary text</p>
    </div>
    <div id="column-two class="col-md-3 text-left">
        <p>An extended description</p>
    </div>
</div>

CSS：

@media screen and (max-width: 300px) {
    #column-one, #column-two {
        text-align: center;
    }
}

使用页面大小引导更改文本对齐

2 个答案: