试图在H1我的待办事项列表下方添加边框底部

问题描述 投票:-1回答:3

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center">
              <div class ="col-12">
                <h1 class="text-light text-center">MY TODO LIST</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Test todo</p>
                  </div>
                </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>
html css bootstrap-4 margin
3个回答
0
投票

您做得很好,您做对了,只是一个简单的调整。我已经更新了代码片段,只需运行它即可。

您必须将h1标签更新为此-

<h1 class="text-light text-center pt-3 mb-5">MY TODO LIST</h1>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet"
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center">
              <div class ="col-12">
                <h1 class="text-light text-center pt-3 mb-5">MY TODO LIST</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Test todo</p>
                  </div>
                </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>

0
投票

使用以下CSS,您可以在底部添加边框:

h1{
border-bottom: solid white 2px;
}
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center">
              <div class ="col-12">
                <h1 class="text-light text-center">MY TODO LIST</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Test todo</p>
                  </div>
                </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>

0
投票

您需要在h1类上使用填充而不是边距。例如,如果您将h1更改为您想要的间隙:

<h1 class="text-light text-center pb-5">MY TODO LIST</h1>
© www.soinside.com 2019 - 2024. All rights reserved.