带有引导程序的中心列

时间：2018-05-01 19:10:42

标签： html css twitter-bootstrap

我试图通过使用偏移来使用col-md-5将容器对中，但它并不完全居中。我听说你可以将它嵌套在另一个容器中以使其居中，但不确定如何这样做。我的所有javascript链接和引导程序都存在，但未在下面的代码中显示，只是为了让所有人阅读更短。我在下面附上了我的代码。感谢您帮助我学习并提高我的技能！

HTML

＆＃13;
＆＃13; 
body {
  background-image: url(../../Icons/violin.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

#sign-up {
  margin-top: 60px;
  border-radius: 5px;
  padding-bottom: 20px;
  background: white;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 7%;
  margin-bottom: 3%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 13px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="col-md-5 offset-md-3" id="sign-up">

      <!-- Logo and Sign Up Text -->
      <div class="text-center">
        <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
        <h1>Signing up as</h1>
      </div>

      <!-- Radio check 1 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                    </label>
      </div>

      <!-- Radio check 2 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                    </label>
      </div>

      <!-- Individual Form -->
      <form id="individual">

        <!-- Individual First Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="First name" />
        </div>

        <!-- Individual Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Last name" />
        </div>

        <!-- Individual Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Individual Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Individual's Birthday -->
        <div class="form-group">
          <label>Birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <!-- Parent Form -->
      <form id="parent" class="hidden">

        <!-- Parent's Fist Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's first name" />
        </div>

        <!-- Parent's Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's last name" />
        </div>

        <!-- Parent Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Parent Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Child's first name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Child's first name" />
        </div>

        <!-- Child's Birthday -->
        <div class="form-group">
          <label>Child's birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <p class="text-center" id="small">By signing up you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>
    </div>
  </div>
  </div>


  CSS
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

body {
  background-image: url(../../Icons/violin.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

#sign-up {
  margin-top: 60px;
  border-radius: 5px;
  padding-bottom: 20px;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 7%;
  margin-bottom: 3%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 13px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="col-md-5" id="sign-up">

      <!-- Logo and Sign Up Text -->
      <div class="text-center">
        <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
        <h1>Signing up as</h1>
      </div>

      <!-- Radio check 1 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                    </label>
      </div>

      <!-- Radio check 2 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                    </label>
      </div>

      <!-- Individual Form -->
      <form id="individual">

        <!-- Individual First Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="First name" />
        </div>

        <!-- Individual Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Last name" />
        </div>

        <!-- Individual Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Individual Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Individual's Birthday -->
        <div class="form-group">
          <label>Birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <!-- Parent Form -->
      <form id="parent" class="hidden">

        <!-- Parent's Fist Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's first name" />
        </div>

        <!-- Parent's Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's last name" />
        </div>

        <!-- Parent Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Parent Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Child's first name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Child's first name" />
        </div>

        <!-- Child's Birthday -->
        <div class="form-group">
          <label>Child's birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <p class="text-center" id="small">By signing up you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>
    </div>
  </div>
  </div>


  CSS

答案 1 :(得分：0)

如果您使用的是bootstrap版本3，那么您只需更改

之后放置的标记类别即可 
<body>
<div class="container">
    <div class="col-md-6 col-md-offset-3" id="sign-up">

这里的工作示例： https://jsfiddle.net/ppqe9b7h/

乐意提供帮助：）

答案 2 :(得分：-1)

对于您尝试过的布局，我建议您使用mx-auto代替offset-*。前者只是将列推到中心，后者仅在未使用列数为偶数时才能进行居中（因此col-8 offset-2起作用，因为8 + 2为10，你有2个未使用的列等于12;引导网格列长度。）

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-5 mx-auto bg-danger text-white">
      Test
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

另外，你需要记住Bootstrap的Grid结构; .row是正确定位的必要组件，原始示例中缺少它。

相关问题
最新问题