將表單框移動到全尺寸橫幅上的右側

Question

我想將表單框移動到右側，但我試圖調整一切，但結果是框正在跳轉。我也試着調整bootstrap col-md。

任何人都可以看到我可以如何將表單框移動到右邊？

[！[表箱] [1] [1]

<!-- Baggrundsbillede --> .fullscreen { 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-position: 50% 50%\9 !important; 
 
    background-image: url(../../../img/landingpages/dummypictures/fullsize_bg.jpg); 
 
} 
 
.overlay { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.signup-header { 
 
    margin: 150px 0 100px; 
 
    background: rgba(255, 255, 255, 0.2); 
 
    border-radius: 4px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    height: 420px; 
 
} 
 
.signup-header h3 { 
 
    padding: 20px 0 10px; 
 
    color: white; 
 
    font-weight: 300; 
 
} 
 
.form-header input { 
 
    position: relative; 
 
    padding: 5px 15px; 
 
} 
 
.form-header .form-control { 
 
    border-radius: 0; 
 
    border: solid 1px #dadada; 
 
    background-color: #fff; 
 
    color: #333; 
 
    height: 55px; 
 
} 
 
.form-header .btn { 
 
    border-radius: 0; 
 
    height: 55px; 
 
    width: 100%; 
 
    background-color: #3eb0f7; 
 
    color: white; 
 
    font-size: 17px !important; 
 
    padding: 0 33px; 
 
    border: none; 
 
    margin: 0; 
 
    -webkit-transition: all .8s ease; 
 
    transition: all .8s ease; 
 
} 
 
.form-header .btn:hover { 
 
    background-color: #1f96e0; 
 
    -webkit-transition: all .8s ease; 
 
    transition: all .8s ease; 
 
} 
 
.signup-header p { 
 
    color: white; 
 
}

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

 
<div class="fullscreen landing parallax"> 
 
    <div class="overlay"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-7"> 
 

 
      <!-- /.logo --> 
 
      <div class="logo"> 
 
      <a href="https://site.dk/"> 
 
       <img src="~/img/site-logo-white-small.png" alt="logo"> 
 
      </a> 
 
      </div> 
 

 
      <!-- Hovedoverskrift --> 
 
      <h1> 
 
           Fremtidens B2B salgsorganisation 
 
          </h1> 
 

 
      <!-- Underoverskrift --> 
 
      <div> 
 
      <p>Ny teknologi har for altid ændret den måde indkøbet sker på B2B markedet. Dette stiller helt store krav til den salgsansvarlige i forhold til den måde der skal sælges på. Dette inspirationssemenar giver dig indblik i hvordan fremtidens effektive 
 
       salgsorgisation ser ud</p> 
 
      </div> 
 
     </div> 
 

 
     <!-- Form --> 
 
     <div class="col-md-5"> 
 
      <div class="signup-header"> 
 
      <h3 class="form-title text-center">TILMELD GRATIS SEMINAR</h3> 
 
      <div class="sign-up"> 
 
       <form id="seminarform"> 
 
       <div class="form-group"> 
 
        <label class="sr-only" for="name">Fornavn</label> 
 
        <input type="text" class="form-control" id="name" name="name" placeholder="Fornavn" 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="Mobil" required /> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="sr-only" for="company">Virksomheden her</label> 
 
        <input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required /> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label class="sr-only" for="challenges">Din største udfordring</label> 
 
        <select id="challenges" name="challenges" class="form-control" required> 
 
        <option>Arbejdsområde</option> 
 
        <option>Salg</option> 
 
        <option>Marketing</option> 
 
        <option>Ledelse</option> 
 
        <option>Konsulent</option> 
 
        <option>Andet</option> 
 
        </select> 
 
       </div> 
 
       <input type="text" id="Channel" name="Channel" style="display: none;" /> 
 
       <input type="text" id="Campaign" name="Campaign" style="display: none;" /> 
 
       <input type="submit" class="btn btn-default active btn-block btn-lg" value="Tilmeld"> 
 
       </form> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

選項1： 請看看一個樣，通過給寬度與文字在左列像這樣：

p { width: 90%; } 

選項2 哪個更好， 調整列，將col-md-7更改爲col-md-6，並將col-md-5（表單）更改爲col-md-4 col-md-push-1這會將表單1列向右推。