引导-如何使两个div并排开始，然后分别堆叠，并在狭窄的视口中使文本左对齐？
我想堆叠两个div（开始时，在每个div中分别并排放置左对齐和右对齐的文本）。
当我缩小视口比每个div的大小小时，我想堆叠两个div，文本向左对齐（每个div中彼此对齐相同）。
如何才能达到这种效果呢？
超文本标记语言
<div class="footer">
<div class="row text">
<div class="col-sm-6">
<span class="label">Email us:</span><a class="active normal" href="mailto:email@server.com">email@server.com</a>
</div>
<div class="col-sm-6">
<span class="label">Call us:</span><a class="active normal">1-888-888-8888</a>
</div>
</div>
</div>
CSS-Sass
div.footer
padding-top: 15px
padding-left: 40px
background: #eeeeee
height: 60px
div.footer div.left
padding-left: 15px
div.footer div.right
margin-right: 40px
共有1个答案
解决方案是使用媒体查询，并在视口变得太小时显示：块和宽度：100%（最初为内联块和宽度的50%）。我还修改了HTMLdiv类，为每个并排div包含col-sm-6和col-md6。
CSS
div.footer
display: block
padding-top: 15px
padding-bottom: 15px
padding-left: 40px
background: #eeeeee none
height: auto
div.footer div.left
padding-left: 15px
div.justify
width: 100%
div.justify div
width: 50%
display: inline-block
div.row.justify div:last-child
text-align: right !important
@media screen and (max-width: 500px)
div.justify div
display: block
width: 100%
div.row.justify div:last-child
text-align: left !important
超文本标记语言
<div class="footer">
<div class="row justify text">
<div class="col-sm-6 col-md-6">
<span class="label">Email us:</span><a class="active normal" href="mailto:email@server.com">email@server.com</a>
</div>
<div class="col-sm-6 col-md-6">
<span class="label">Call us:</span><a class="active normal">1-888-888-8888</a>
</div>
</div>
</div>
-
问题内容： 我有两个未嵌套的div，一个在另一个之下。它们都在一个父div内，并且该父div重复其自身。所以本质上： 我想每对以及彼此相邻。我怎样才能做到这一点？ 问题答案：
-
问题内容： 我有一个小问题。我正在尝试使用CSS并排对齐两个div，但是，我希望将中心div放置在页面的水平中央，我通过使用以下方法实现了这一点： 很好 我想将第二个div放置在中心页面换行的左侧，但是尽管可以确定，但我无法使用浮点数来完成此操作。 我想将红色div推向白色div。 这是我当前关于这两个div的CSS，侧边栏是红色div，页面换行是白色div： 问题答案： 如果包裹了div，如下所
-
问题内容： 我有两个div并排。我希望它们的高度相同，并且如果其中之一调整大小，则保持不变。我无法弄清楚这一点。有想法吗？ 为了澄清我的困惑问题，我希望两个框的尺寸始终相同，因此如果一个框由于文本放置而增大，则另一个框应与高度匹配。 问题答案： flexbox 使用flexbox时，它是一个声明：
-
我试着将两个div并排放置，两个div之间的间距为20px。div在包装内，宽度为800px。左div是250px，右div是550px，但当然，如果我在它们之间加上20px的边距，总宽度将增加到800px以上。有没有办法强制右div宽度为550px-20px的余量？ CSS 超文本标记语言 我的意思是我必须手动减小宽度还是有更好的解决方案？ jsfiddle：https://jsfiddle.n
-
问题内容： 我试图并排放置两个div，并使用以下CSS。 HTML很简单，在包装div中有两个左和右div。 我已经尝试了很多次，也在StackOverflow和其他站点上寻找更好的方法，但是找不到确切的帮助。 因此，代码乍一看效果很好。问题是，当我增加（％）的宽度时，左div自动获得填充/边距。因此，在65％的宽度处，左div有一些填充或边距，并且与右div并不完全对齐，我尝试填充/边距0但没有
-
我想设置一个JButton，使其图标与它的左侧对齐，而文本居中。 我已经找到了如何让其中一个左，另一个右，或两者在同一个设置，但我找不到我要找的。 当然，我总是可以重新定义绘制方法，但我正在寻找一种更精简的方法。