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

这对你有用..

表格的反应位置

2 个答案: