小贝子编程

Bootstrap -如何使两个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>


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

解决方案是使用媒体查询，并使display: block和width: 100%(从最初的inline-block和width: 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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium