フォームの応答位置

Question

フォームボックスを配置しようとしています。私がどこに行ったかを見るために、私はちょうどインラインスタイルを作った。デスクトップバージョンでも同じように見えますが、モバイル版で見ると、フォームボックスが画像から外れています。

外部のスタイルシートでインラインCSSを作成し、Mediaqueryを作成した場合、正しい方法ではありませんか？私にとっては悪い習慣のように思える？

<!-- Content --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;"> 
       @Umbraco.RenderMacro("Ebook") 
      </div> 
     </div> 
    </div> 


<div class="sign-up"> 
    <form id="ebog-trin-for-trin"> 
     <div class="form-group"> 
      <label class="sr-only" for="name">Navn</label> 
      <input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="lastname">Efternavn</label> 
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="email">E-mail</label> 
      <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required /> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="phone">Telefon</label> 
      <input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required /> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="company">Virksomhed</label> 
      <input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/> 
     </div> 

     <input type="text" id="Channel" name="Channel" style="display: none;" /> 
     <input type="text" id="Campaign" name="Campaign" style="display: none;" /> 
     <button type="submit" class="btn btn-default active">Hent E-bogen</button> 
    </form> 
</div> 

Answer 1

ここでは、大画面の場合は右に浮動し、小画面の場合は全幅表示の例を示します。

.floating-form { 
 
    background: #eee; 
 
    float: right; 
 
    padding: 20px 0; 
 
    width: 320px; 
 
} 
 

 
@media (max-width: 479px) { 
 
    .floating-form { 
 
    float: none; 
 
    width: auto; 
 
    } 
 
}

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

 
<div class="floating-form"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="sign-up col-xs-12"> 
 
     <form id="ebog-trin-for-trin"> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="name">Navn</label> 
 
      <input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="lastname">Efternavn</label> 
 
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="email">E-mail</label> 
 
      <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="phone">Telefon</label> 
 
      <input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="company">Virksomhed</label> 
 
      <input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/> 
 
      </div> 
 

 
      <input type="text" id="Channel" name="Channel" style="display: none;" /> 
 
      <input type="text" id="Campaign" name="Campaign" style="display: none;" /> 
 
      <button type="submit" class="btn btn-default active">Hent E-bogen</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

<!-- Content --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-6 col-lg-6"> 
       @Umbraco.RenderMacro("Ebook") 
      </div> 



<div class="sign-up col-xs-6 col-md-6 col-lg-6"> 
    <form id="ebog-trin-for-trin"> 
     <div class="form-group"> 
      <label class="sr-only" for="name">Navn</label> 
      <input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="lastname">Efternavn</label> 
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="email">E-mail</label> 
      <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required /> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="phone">Telefon</label> 
      <input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required /> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="company">Virksomhed</label> 
      <input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/> 
     </div> 

     <input type="text" id="Channel" name="Channel" style="display: none;" /> 
     <input type="text" id="Campaign" name="Campaign" style="display: none;" /> 
     <button type="submit" class="btn btn-default active">Hent E-bogen</button> 
    </form> 
</div> 

</div> 
</div> 

Fiddle

これは..あなたのために有用な