使用 VS 2017， Bootstrap 4.1.1 用于 MVC 5 页面我试图向图像添加右侧填充，如下所示，但是当我这样做时，图像的圆圈被扭曲了。如果我从圆圈上取下填充就可以了，但是文本太靠近右侧的圆圈了:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>图像是一个普通的正方形图像。我想使用圆 Angular Bootstrap 功能，但是当我在图像的右侧添加填充时，圆圈会变形。我需要填充，因为文本会在图像的右侧流动。使用 Bootstrap 4.1.1 时，如何在不使圆圈变形的情况下在圆圈中的图像右侧添加填充。提前致谢。
========== 2018 年 7 月 5 日更新
作为引用，下面是我的 MVC 5 元素的 _Layout.cshtml 文件中的内容。如果我在原始代码顶部采用建议的标签更改，那么我想我需要将其添加到 _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>
========== 更新 2018 年 7 月 7 日晚上 11:30
这是我在 VS 2017 元素中安装的 Bootstrap Nuget 包的图片:
========= 更新 2018 年 7 月 7 日上午 12:27 我可以使用的唯一解决方案是用 div 标签将 img 标签括起来，并将 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>
最佳答案
在图形标签上使用 d-flex 类，并使用 mr-4 类添加边距(而不是在图像上填充)。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<br />
<figure class="d-flex">
<img class="img-fluid rounded-circle mr-4" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
</div>或
如果您仍然想使用 float ，则只需将 padding-right: 20px 更改为 margin-right: 20px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
margin-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>关于c# - 添加填充时，圆 Angular 圆的 Bootstrap 4.1.1 类选项在 MVC 5 页面上变形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51203411/