Fatal编程技术网
  • html/
  • Html Can'；我不明白Bootstrap是如何对齐元素的

Html Can'；我不明白Bootstrap是如何对齐元素的

html css twitter-bootstrap bootstrap-4

Html Can'；我不明白Bootstrap是如何对齐元素的,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我是一名新的web开发人员（不是新的工程师，只是刚刚接触web），我很难弄清楚如何使页面上的元素正确对齐 我希望元素占据整个水平空间并垂直堆叠。然而，它们却出现在一起 我使用的是Bootstrap4，下面是我编写的HTML base.html如下： <!DOCTYPE html> <html lang="en"> <head> <!-- Meta tags avoided for simplicity --> <!-- Bootstr

我是一名新的web开发人员（不是新的工程师，只是刚刚接触web），我很难弄清楚如何使页面上的元素正确对齐

我希望元素占据整个水平空间并垂直堆叠。然而，它们却出现在一起

我使用的是Bootstrap4，下面是我编写的HTML

base.html
如下：

<!DOCTYPE html>
<html lang="en">

<head>

<!-- Meta tags avoided for simplicity --> 

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
  body {
    padding-top: 60px;
  }
</style>
</head>

<body>

<!-- Navigation -->
<!-- Nav bar code ignored for simplicity -->

<!-- Page Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-12 text-center">
      <h1 class="mt-5">My web page</h1>
    </div>
  </div>
  <div class="row justify-content-center">
      <div class="col col-lg-12">        
        {% block content %}{% endblock %}
      </div>
  </div>
</div>
</body>

</html>
我希望列表占据整个宽度，
submit
位于列表下方。然而，它们似乎紧挨着一个

如果您能提供一些关于这里发生了什么以及我如何修复它的信息，我将不胜感激

谢谢

从表单中删除
表单内联
类，并使元素具有
列表组
class a
ul
而不是div。
li
应具有
ul
父元素。这是正确的标记


身体{
填充顶部：60px；
}
我的网页
{{title}}
{%csrf_令牌%}

    
{问题%中的问题的百分比}

  • 
{{问题}
    
对
不

    • 
{%endfor%}


提交
您始终可以定义一个新id来覆盖引导类设置的默认对齐方式。您的问题可以像另一个答案一样简单地解决，但是对于将来类似的问题，如果您有多个具有重叠属性的类，您可以使用此选项

//CSS
#block {
display: block;
width: 100%;
}

//HTML
<div class="class1 class2 class3" id="block">
   <!--The content here-->
</div>

//CSS
#挡块{
显示：块；
宽度：100%；
}
//HTML
这是一个快速而可靠的解决方案，因为ID的属性优先于类的属性。

您希望哪个元素一个叠在另一个之上？@NanditaAroraSharma我希望
标题
位于顶部，
表单
之后（扩展到全宽）最后是
submit
。我告诉过你bootstrap设计中的错误。请参考我的答案。它应该像预期的那样工作谢谢，我感谢你的帮助-我唯一想做的是，我认为我在HTML中的某个地方犯了一个错误，我想修复这个错误。阅读引导文档时，似乎默认情况下，由于Flexbox impl，容器应扩展到全宽。使用Chrome DevTools快速查看元素的所有继承CSS属性，并启用/禁用它们。您将找到导致问题的属性。只需创建一个ID就可以覆盖它。谢谢！我感谢你的解释：） 
//CSS
#block {
display: block;
width: 100%;
}

//HTML
<div class="class1 class2 class3" id="block">
   <!--The content here-->
</div>