边界半径和阴影框无法正常工作

Question

我在项目中使用bootstrap-vue，并且在使用响应式网格。我对不同的视点使用了不同的列大小。我在将背景，边框半径和阴影阴影添加到<footer id="footer" class="main-footer clearfix"> <p class="Copyright clearfix"> S &copy; 2020 </p> <h1 class="Social clearfix"> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </h1> <ul class="footer-nav clearfix"> <li><a href="/Impressum/Impressum.html">Impressum</a></li> <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li> <li><a href="/AGB/AGB.html">AGB</a></li> </ul> </footer>的内容时遇到问题，因为<b-row>的宽度大于所有列的宽度。因此，我为每列添加背景，并且其工作正常（我不确定这样做的正确方法）。我使用相同的方法添加边框半径。它的工作正常，直到cols在小型设备中相互堆叠。我无法使盒装阴影适用于任何设备尺寸。有什么办法可以将内容包装在<b-row>内，并在包装​​器中添加border-radius和box-shadow以及背景。

示例https://codesandbox.io/s/intelligent-goldstine-wwpng?file=/src/components/HelloWorld.vue

Answer 1

您需要使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container" id="con"> <br /> <div class="form-group row"> &nbsp;&nbsp; الدولة: @Html.DropDownList("StateId", (SelectList)ViewBag.StateId, "اختر الدولة", htmlAttributes: new { @class = "form-control mx-2 col-md-2", id = "State" }) المدينة:@Html.DropDownList("CityName", new SelectList(string.Empty, "Value", "Text"), htmlAttributes: new { @class = "form-control col-md-2", id = "city" }) فصيلة الدم:@Html.DropDownList("blt", new SelectList(new[] { "+A", "-A", "+B", "-B", "+AB", "-AB", "+O", "-O" }), "اختر فصيلة الدم", new { @class = "form-control col-md-2 mr-md-3", id = "bt" }) <input type="submit" value="Search" class="btn btn-info col-md-1 mr-1" id="btn1" /> <input type="submit" value=" بحث" class="btn btn-info col-md-1" id="btnAllUser" /> </div> </div> <div id="UpdatePanel"> </div>来解决问题。并且我建议避免使用内联样式。