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列向右推。

在fullsize横幅上将表单框移动到右侧

1 个答案: