如何使用 Bootstrap 网格系统使登录表单响应迅速？

Question

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 5.4em 1.4em 6.4em !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
  color: black;
}

<fieldset class="scheduler-border">
  <legend class="scheduler-border">my legend</legend>
  <form>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</fieldset>

代码：- http://jsfiddle.net/Dhanunjay/6r3wos04/10/

能否请您更正以上代码。目前它占据了整个屏幕。我需要它位于屏幕中间和所有 4 个边空间的地方。

即使在 css 类中，我也删除了一些 css，例如内边距、宽度、边距...但问题仍然存在

使用 col-sm...lg...xs..... 我想做出响应。任何想法和建议请

Answer 1

您可以使用此模板示例来构建您的表单。在每个列中，您应该将标签输入放入其中

Answer 2

容器是 bootstrap 特定的 class，您不应直接为其设置样式，而是创建另一个 class 供您使用。您还将其设置为固定宽度，这将限制响应能力。如果您想限制最大宽度，请改用 max-width 属性。

Answer 3

这个结果满意吗？我使用 Bootstrap 4:

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

如果您也希望它垂直居中：

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Answer 4

Can I make login form, center of the page . I mean login form in center of web page with all 4 four side equal spaces? And login button also to center

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">my legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

我的回答有帮助吗？如果您有任何问题，请写在评论中。

Answer 5

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}



.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}
 fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}
.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">My legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            Register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

如何使用 Bootstrap 网格系统使登录表单响应迅速？

How to make login form responsiveness using Bootstrap grid system?

html

css

bootstrap-4

bootstrap-vue