使用页面大小引导程序更改文本对齐方式

Question

我有两个使用引导程序并排居中的div。 一个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>

更新！

与两个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文档

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

如果要小于992px，则可以使用.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;
    }
}