Попытка добавить границу внизу под H1 MY TODO LIST - PullRequest
Новая
       42

Попытка добавить границу внизу под H1 MY TODO LIST

0 голосов
/ 03 мая 2020 

<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>

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Используя следующее 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 голосов
/ 03 мая 2020

У тебя все отлично, ты все сделал правильно, просто простая подстройка. Я обновил фрагмент кода, просто запустите его.

Вы должны обновить тег h1 до этого- 

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

index. html

<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>
...