Блог

Я пытаюсь обернуть несколько вещей в коробку, а именно функцию входа в систему. Однако, когда я попытался поместить содержимое в его собственное, но даже после редактирования css фактические изменения не отображаются

Я пробовал как метод .boxed, так и метод .box .white (для фона). Ни один из них не показывает никаких различий

 <div class="form-horizontal">
        <div class="box white">
            <h4>tbl_Gebruiker</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.gebruikersnaam, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.gebruikersnaam, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.gebruikersnaam, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.wachtwoord, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.wachtwoord, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.wachtwoord, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>
 

И для css:

 .box {
      width: 800px;
      height: 500px;
      border: 2px black;
  }
  .white {
      background: white;
  }
 

Чего я ожидаю, так это того, что функция входа в систему будет заключена в белое поле с черной рамкой. То, что происходит, — это… ну, ничего особенного.

Причина, по которой вы не можете видеть границу даже после применения .box класса, заключается в том, что вы не объявили стиль границы. Итак, по умолчанию принимается значение none, которое не указывает границы.

В соответствии Border с синтаксисом свойства он принимает одно или несколько из следующих значений в комбинации:

 border:  <border-width> || <border-style> || <color>
 

И то, что вы указали border-width color border-style , — это свойство for the border и без него, которое делает свойство .box класса border следующим образом: border:2px black none .

Итак, измените класс .box с этого:

 .box {
  width: 800px;
  height: 500px;
  border: 2px black;
}
 

К этому:

 .box {
  width: 800px;
  height: 500px;
  border: 2px solid black;
}
 

И вы сможете увидеть границу.

Если я правильно понял ваш вопрос, следуйте приведенным ниже css:

 .box{
width: 100%;
height:100%;
border: 2px solid black;
background:white;
 

}

Вы можете использовать этот способ, чтобы css

 .white-box {
background: #fff;
border-radius: 15px;
padding: 0 0 35px 0;
box-shadow: rgba(0,0,0,0.1) 0 4px 5px;
border: #eee solid 1px;
height: 100%;