Question

我目前正在尝试实施您在下面看到的设计：

除了输入字段和按钮的大小外，一切正常。我正在使用Boostrap。

HTML：

  <div className='jumbotron text-center'>
    <div className='container'>
      <h1 id='hero-questions-h1'>What’s your name?</h1>
    </div>

    <div className='container'>
      <div class="col-sm-4 text-center">
        <div className="form-group input-group-lg">
          <input type="text" className="form-control"></input>
        </div>
        <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
      </div>
    </div>

      <div className='container'>
        <h2 id='tip'>
          Tip! You will get motivational playlists, stories, posters and much more
        </h2>
      </div>

    <footer className="footer">
      <div className="container">
        <p id="social-proof" className="text-center">“Must have for every ambitious athlete!”</p>
        <p id="social-proof-tagline" className="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p>
      </div>
    </footer>
  </div>

CSS：

.jumbotron {
  height: 100vh;
  margin-bottom: 0px !important;
  background-image: url("bg-hero-v2.png");
  background-size: cover;
}

#hero-h1 {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 60px;
  padding-top: 10%;
}

#hero-h2 {
  color: #ECECEC;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-top: 30px;
  line-height: 40px;
  padding-bottom: 40px;
}

#hero-questions-h1 {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 60px;
  padding-top: 10%;
  padding-bottom: 30px;
}

.btn-success {
  background-color: #66B878 !important;
}

.form-control {
  background-color: transparent !important;
  color: white !important;
}

#signup-btn {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#continue-btn {
  height: 60px;
  font-size: 18px;
}

#social-proof {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
}

#social-proof-tagline {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 16px;
}

#tip {
  color: #ECECEC;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  margin-top: 30px;
}

.footer {
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: black;
  opacity: 0.6;

}

正如您所看到的，我当前的实现如下所示：

Answer 1

DOM元素使用class而不是className来分配CSS类（您可能会将这与JS .className属性混淆）。要根据您的喜好定位字段，我建议您利用引导网格col-x-offset-x options来定位.row

左侧的列偏移量

为了正确定位，请记住在列周围以及.row之间放置.container元素。此外，input元素是自动关闭的（即，您不需要尾随</input>）

<强> HTML

<div class='jumbotron text-center'>
    <div class='container'>
        <h1 id='hero-questions-h1'>What’s your name?</h1>
    </div>

    <div class='container'>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-6 text-center">
                <div class="form-group input-group-lg">
                    <input type="text" class="form-control" />
                </div>
                <button type="button" id="continue-btn" class="btn btn-success btn-block">Continue</button>
            </div>
        </div>
    </div>

    <div class='container'>
        <h2 id='tip'>
          Tip! You will get motivational playlists, stories, posters and much more
        </h2>
    </div>

    <footer class="footer">
        <div class="container">
            <p id="social-proof" class="text-center">“Must have for every ambitious athlete!”</p>
            <p id="social-proof-tagline" class="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p>
        </div>
    </footer>
</div>

<强> JSFIDDLE

Answer 2

我现在正在使用bootstrap，我遇到了同样的问题。取代：

<div className='container'>
  <div class="col-sm-4 text-center">
    <div className="form-group input-group-lg">
      <input type="text" className="form-control"></input>
    </div>
    <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
  </div>
</div>

试试这个：

<div className='container'>
<div class="col-sm-4">
    &nbsp;
</div>
<div class="col-sm-4 text-center">
    <div className="form-group input-group-lg">
        <input type="text" className="form-control"></input>
    </div>
    <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
</div>
<div class="col-sm-4">
    &nbsp;
</div>

col-sm-4的额外课程将以正确的顺序构建div。

<div class="col-sm-4">
    &nbsp;
</div>

 是可选的，但我发现它对我很有帮助。

Center Bootstrap form-group输入字段，使其更小

2 个答案: