缩小窗口时从垂直到水平分隔符的css响应性答案

【问题标题】：css responsiveness from vertical to horizontal divider when shrink the window缩小窗口时从垂直到水平分隔符的css响应性
【发布时间】：2017-06-27 20:35:38
【问题描述】：

我在设计与图片中相同的页脚时遇到问题。我是css和bootstrap的新手，这就是为什么没有太多知识。我只想为移动视图设计给定的页脚。对于桌面，图像会有所不同。我对水平分区感到困惑，因为它在桌面上有垂直分区

我的桌面视图代码是：

.btn-font {
  color: white;
  font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row " style=" background-color:#F2F2F2;">
  <div class="col-xs-12">
    <div class="container ">
      <div class="row  footer-border " style="margin-top: 6em; border-right: 2px solid #ccc;">
        <div class="col-md-4 col-xs-12 ">
          <button class="btn btn-success button-def form-text btn-font" id="button" type="submit" name="go" style="margin-top: 1.2em; height: 50px; ">Get started with MMN free</button>

        </div>
        <div class="col-md-8 col-xs-12  ">
          <p class="slider-heading " style="margin-top: 1em;">Discover what technology can do for your NGO.</p>
        </div>
      </div>
      <div class="row" style="margin-top: 5em; ">
        <div class="col-xs-12 footer1">
          <p>ManageMyNGO</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 footer2">
          <p>a ColoredCow product</p>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

Twitter bootstrap hide element on small devices的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

使用 CSS border。在移动设备中，将其设置为顶部或底部边框（因此它是水平的），在桌面上使用@media 查询将其设置为左边框或右边框（因此它是垂直的）。

【讨论】：

【解决方案2】：

您可能想在输入 css 时练习使用%。
例如

border-right: 1%
style="margin-top: 1.3%; <br/>

因为使用px 和em 通常可能会因不同尺寸的屏幕而损坏您的CSS。

【讨论】：