ウィンドウを縮小するときに垂直から水平へのディバイダからの応答性

Question

イメージと同じフッタをデザインする際に問題があります。私はCSSとブートストラップで新しいですなぜ多くの知識を持っていないです。私は、モバイルビューのためにのみ、与えられたフッターを設計したい。それはデスクトップに垂直パーティションを持つことになりますので、デスクトップ用の画像はdifferent.Iは水平パーティションと混乱しています

デスクトップ表示のための私のコードは次のとおりです。

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

Answer 1

CSS borderを使用してください。モバイルでは、上部または下部の境界線（水平になるようにする）にし、デスクトップ上には@mediaクエリで左右の境界線にする（垂直なので）。

Answer 2

cssを入力するときは、%を使用して練習することができます。例えば、
。 pxとemを使用するなど、

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

は、通常は画面の異なるサイズからあなたのCSSを破損する恐れがあります。