Используя VS 2017, начальную загрузку 4.1.1 для страницы MVC 5 Я пытаюсь добавить правый отступ к изображению, как показано ниже, но когда я это делаю, круг изображения деформируется. Если я сниму отступы с круга, это нормально, но тогда текст слишком близок к кругу с правой стороны:
Изображение является нормальным квадратным изображением. Я хотел бы использовать функцию начальной загрузки с закругленными кругами, но круг искажается, когда я добавляю отступы к правой стороне изображения. Мне нужно заполнение, потому что текст будет течь на правой стороне изображения. Как я могу добавить отступы к правой стороне изображения в круге, не искажая круг при использовании Bootstrap 4.1.1. Заранее спасибо.
========== ОБНОВЛЕНИЕ 5 июля 2018
Для справки ниже указано, что находится в файле _Layout.cshtml моего проекта MVC 5. Если я приму предложенные изменения тега в верхней части исходного кода, то, я думаю, мне нужно добавить это в файл _Layout.cshtml? Или эти изменения добавляются вверху только для тех страниц, на которых обсуждается проблема? Я в некотором замешательстве.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - some person Website</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body style="padding-top:unset; padding-bottom:unset">
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
<a href="#" class="navbar-brand">Some Person</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="Index">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<!-- <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>li>-->
</ul><!-- navbar-nav -->
</div><!-- container -->
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - ASP.NET MVC 5 web application built by some person</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
========== ОБНОВЛЕНИЕ 7 июля 2018 г. 11:30 вечера
Вот изображение загрузочного пакета Nuget, который я установил в своем проекте VS 2017:
========= ОБНОВЛЕНИЕ 7 июля 2018 г., 12:27.
Единственное решение, которое я мог использовать, - заключить тег img в тег div и применить float-left и padding к тегу div, а не тегу img. Все остальные части, которые поставляются с VS 2017, хороши, поэтому мне не нужны ни добавленные операторы сценария в верхней части MVC 5, ни строка ссылки css в верхней части.
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>