gpt4 book ai didi

html - 在 Bootstrap CSS 中将列表居中

转载 作者:太空宇宙 更新时间:2023-11-04 16:01:58 25 4
gpt4 key购买 nike

<分区>

重复报告后编辑

抱歉,我认为建议的副本实际上可能是副本。我首先尝试了它,但它对我不起作用,因此出现了一个新问题。再次查看新的建议答案后,我意识到我的问题可能与我正在使用的工具 (codepen.io) 的开箱即用设置有关。我想我可能需要看看这个工具! (无论是工具还是我尚未检查的 Bootstrap 的默认版本)。谢谢。

我正在做一个非常 noddy 的小页面来尝试获得一些前端知识。我认为非常基本的东西,但我正在努力将列表放在页面的中心。基本上我已经插入了 Bootstrap ,我相信这些构建的 css 类之一正在向无序列表添加元素符号点,我认为这很好。当我将文本居中时,元素符号点位于页面左侧,而文本居中。我想也许答案是将该部分分成 3 列,并将我的列表放在中间列中,这在一定程度上起作用,但当我尝试不同的屏幕尺寸时会发生变化(我认为 Bootstrap 的重点是最有助于处理响应式设计!? )

无论如何,我想知道是否有人可以给我一个提示,告诉我如何以一种方式使我的列表居中:a) 左对齐,以便它符合

  • 元素 1
  • 第 2 项
  • 第 3 项

但是在页面的中心并且 b) 无论屏幕尺寸如何都保持居中?

这是粗略的 html。我已尝试将其减少一些以保留基本要素,但如果更多信息有帮助,请告诉我。我已经尝试过各种基于 css 的方法,但都失败了,但我认为(也许是错误的!)答案真的应该是 Bootstrap 类吗?所以在我尝试的 Bootstrap 尝试中留下了示例代码。实际上,尽管我现在只是好奇应该如何完成,所以同样不胜感激 CSS 答案!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
<h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
<h3 class="text-center">The band that brought joy to the hearts of millions</h3>
<div id="div1" class="well text-center">
<div id="div2">
The Mighty Diamonds were a band from Jamaica</div>
</div>
<h3 class="text-center;">A Brief Biog</h3>
<p class="text-left body-para">[Paragraph text]</p>
<h3>Studio albums</h3>
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 text-left">
<ul>
<li><span>1964</span> - Album 1</li>
<li><span>1966</span> - Album 2</li>
<li><span>1967</span> - Authentic Album Vol. 2</li>
<li><span>1996</span> - Greetings from Album 4</li>
<li><span>1998</span> - Ball of Fire</li>
<li><span>2009</span> - From Paris with Love</li>
<li><span>2007</span> - On the Right Track</li>
<li><span>2012</span> - Walk With Me Album</li>
<li><span>2016</span> - Platinum Ska</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com