在添加填充时，圆形圆形的引导 4.1.1 类选项在 MVC 5 页面上被扭曲
Posted
技术标签:
【中文标题】在添加填充时，圆形圆形的引导 4.1.1 类选项在 MVC 5 页面上被扭曲【英文标题】：Bootstrap 4.1.1 class option for rounded-circle is warped on MVC 5 page when adding padding 【发布时间】：2018-12-14 15:36:44 【问题描述】：使用 VS 2017，为 MVC 5 页面引导 4.1.1 我正在尝试向图像添加右侧填充，如下所示，但是当我这样做时，图像的圆圈会变形。如果我将填充从圆圈中取出很好，但文本太靠近右侧的圆圈：
<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" />
<p> Some text about this person. </p>
</figure>
</div>
</div>图像是普通的方形图像。我想使用圆角引导功能，但是当我在图像的右侧添加填充时，圆圈会变形。我需要填充，因为文本将在图像的右侧流动。使用 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 项目中安装的引导 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" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
【问题讨论】：
【参考方案1】：在图形标签上使用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" />
<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" />
<p> Some text about this person. </p>
</figure>
</div>
</div>【讨论】：
您的代码 sn-ps 和更改工作。我想知道为什么您的添加有效，而不是 Visual Studio 2017 中为 _Layout.cshtml 文件提供的添加有效，该文件使用 @Styles.Render() 和 Scripts.Render 语句引入 css、modernizr、jquery 和 bootstrap 等文件。如果我采用您的解决方案，我将不得不用您提供的内容替换 Visual Studio 注入 the_Layout.cshtml 文件的内容。这就是我在 MVC 5 项目中应该做的事情吗？ 我刚刚使用普通脚本和链接标签包含了引导文件，不确定您的视觉工作室如何将它们添加到您的项目中。您应该尝试搜索如何根据您的要求将它们包含在您的项目中。 我使用了 Manage Nuget Package Tool 添加 Bootstrap 4.1.1。我添加了我项目中的包图片，该图片是使用 VS 2017 菜单下的工具 -> Nuget 包管理器 的 VS 2017 管理 Nuget 包工具添加的 对不起，我对上述工具一无所知 :( 对不起，我无法帮助你。:( 您的代码添加在“运行代码片段”工具中工作。但是当我将它们添加到我的 MVC 5 页面时，问题仍然存在。无论我是否保留 VS 部件，添加都不能解决问题。我正在寻找可以在 VS 2017 下的 MVC 5 项目中工作的东西。不过，谢谢你的努力。【参考方案2】：我可以使用的唯一解决方案是用 div 标签将 img 标签括起来，并将 float-left 和 padding 应用于 div 标签而不是 img 标签。 VS 2017 附带的所有其他部分都很好，所以我不需要在 MVC 5 顶部添加的脚本语句，也不需要顶部的 css 链接行。 _Layout.cshtml 文件也保持不变。以下是所有需要的：
<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" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
【讨论】：
以上是关于在添加填充时，圆形圆形的引导 4.1.1 类选项在 MVC 5 页面上被扭曲的主要内容，如果未能解决你的问题，请参考以下文章