无法将换行符放入使用Bootstrap设置样式的列表元素中
在使用Bootstrap设置样式的列表元素中，无法直接将换行符放入。这是因为Bootstrap的列表样式是通过CSS样式表来控制的，而换行符是HTML标记，无法直接在CSS样式中使用。
解决这个问题的方法是使用其他HTML标记或CSS样式来实现换行的效果。以下是几种常见的方法：
- 使用
<br>标签：可以在列表项的文本内容中使用<br>标签来实现换行效果。例如：
<ul class="list-group">
<li class="list-group-item">第一行<br>第二行</li>
<li class="list-group-item">第一行<br>第二行</li>
<li class="list-group-item">第一行<br>第二行</li>
</ul>- 使用CSS样式：可以通过设置CSS样式来实现换行效果。例如，可以为列表项添加一个自定义的类，并在CSS样式中设置
white-space: pre-line;来实现自动换行。例如：
<style>
.custom-list-item {
white-space: pre-line;
}
</style>
<ul class="list-group">
<li class="list-group-item custom-list-item">第一行
第二行</li>
<li class="list-group-item custom-list-item">第一行
第二行</li>
<li class="list-group-item custom-list-item">第一行
第二行</li>
</ul>以上是两种常见的方法来实现在使用Bootstrap设置样式的列表元素中插入换行符的效果。根据具体的需求和场景，可以选择适合的方法来实现所需的效果。
关于腾讯云相关产品和产品介绍链接地址，由于不能提及具体的云计算品牌商，建议您访问腾讯云官方网站，查找相关产品和文档。腾讯云提供了丰富的云计算服务和解决方案，可以根据具体需求选择适合的产品和服务。
相关·内容
我正在尝试创建一个web应用程序，它将生成模板代码，供单独的程序使用。我想在提交时产生一条结构良好的表单消息，其中包含选项卡和新行。
这是当前代码的迭代：
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import Required
app = Flask(__name__)
# F
浏览 0提问于2019-05-20得票数 0
回答已采纳
这是我的网站：
当我将鼠标悬停在列表项上时，我无法让“法律”下拉列表中的列表项更改除蓝色以外的任何颜色。谁能告诉我我需要编辑CSS中的哪些元素？我一直在测试bootstrap.css和bootstrap.min.css中的各种元素，但都没有成功。
浏览 2提问于2012-09-19得票数 18
回答已采纳
在使用Twitter bootstrap时，如何更改选择字段的宽度？添加input-xxlarge CSS类似乎不起作用(就像在其他表单元素上一样)，所以我的下拉列表中的元素当前被切断。
浏览 0提问于2012-08-22得票数 44
回答已采纳
我对CSS和HTML非常陌生，所以在为我的学校项目设计网页时遇到了困难。
目前我正在尝试在导航栏的中间插入一个搜索栏。但是，我只能将其设置在栏的左侧或右侧。我在其他网站中找到了覆盖引导css代码的代码，并将搜索栏移动到页面的中间，但当显示屏较小时，搜索栏不适合下拉菜单。
这是我用来设计网页的html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %} {% endblock %} - Snaplost</title>
&l
浏览 2提问于2020-06-14得票数 0
1回答
我是Bootstrap的新手。我正在尝试设置以下锚点标记颜色的样式
a {
color: black;
text-decoration: none;
}
我可以在inspect元素中更改颜色，但似乎无法在app/ seem /stylesheets/custom.css.scss文件中找到它
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
浏览 1提问于2014-10-14得票数 1
我正在使用react-bootstrap的NavDropdown作为NavBar的一部分来显示数据列表。有时列表比视图的其他部分要长，切断了列表的底部。我需要能够将overflow: auto添加到列表中，但不知道如何做到。将NavDropdown或其中的项封装在一个样式化的div中会破坏react-bootstrap的样式。试图直接(通过className或style)对NavDropdown进行样式设计会破坏react-bootstrap's的造型。有人能解决这个问题吗？
守则大致如下：
<NavBar>
<NavBar.Collapse>
&l
浏览 1提问于2018-02-09得票数 2
回答已采纳
在我的css中，我有这个
#inner div {
display: inline;
height: 200px;
width: 200px;
margin: 10px;
background-color: black;
}
在我的html中，我有这个
<div id="inner">
<h2> <span class="action">Click</span> on each button to read more about them </h2>
浏览 0提问于2013-10-26得票数 0
1回答
我有网站建立了许多自定义的css样式在一些css样式文件中。我想在website.but中使用twitter bootstrap，如果我将它包含在我的页面中，如-
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
所以你可以猜到，因为有这么多的样式和类被bootstrap类和样式所覆盖，所以如果有方法我可以在一个类下使用twitter bootstrap css和js，那么还有很多problems.so吗？我只能在bootstrap.css文件中的
浏览 2提问于2013-05-30得票数 0
我使用的是simple_form和twitter-bootstrap-rails gem。每件事都运行得很好，但不知何故，下拉菜单并没有被推特bootstrap rails风格化，..it显示得就像正常的表单一样。
<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'dropdown'}, :label => 'Send To&
浏览 6提问于2014-03-12得票数 1
3回答
我正在尝试打印一个换行符，并且根据Dust.js指南，在模板中，每个记录输出的末尾都有一个{~n
{#friends} {name}, {age}{~n}{/friends}
我编译了上面的模板，并使用几个JSON记录进行渲染，以生成“out”对象。我正在使用document.getElementById('divID').innerHTML动态替换基本DIV标记中的'out‘对象。问题是我无法打印{~n}中的换行符。我也尝试了{~r}，但还是不走运。有什么想法吗？
浏览 2提问于2012-04-11得票数 3
回答已采纳
我有一个愚蠢的SelectList初始化问题
在我看来，我正在初始化一个列表：
<div class="col-md-6">
<label class="control-label">Offer type</label>
@Html.DropDownListFor(m => m.Filter.OfferTypeList,
new SelectList(Model.OfferTypes, "IdOfferType", "Name"),
ne
浏览 0提问于2014-10-14得票数 0
嘿，伙计们，我只想问一下，在使用这段代码时，如何删除Blade换行符
叶片
{{ HTML::style('packages/bootstrap/css/bootstrap.css') }}
{{ HTML::style('contents/css/master.css') }}
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/packages/bootstrap/css/bootstrap.css&
浏览 2提问于2014-09-06得票数 0
回答已采纳
这有点令人费解，我在span标签中对一些文本进行了换行处理，并在它之后强制换行。我不知道它是React.js、Next.js还是Bootstrap，但我似乎无法删除换行符 看看这个页面，它是页面顶部的电话号码。https://wordpress-website-headless-v2-ep3x6ohy1.vercel.app/ 我已经尝试过使用Boostrap的text-nowrap标签，我还在每个类中添加了white-space:nowrap;。我假设React.js正在做这件事，但谁知道呢。 html <Col xs={6} md={8} className="text-r
浏览 23提问于2021-01-21得票数 1
回答已采纳
我有一个按钮，如果我按下该按钮一个打开的启动-选择列表将显示，除了，2个按钮，一个保存更改和一个取消修改。按下任何这个按钮将使引导-选择隐藏，所以我不需要启动-选择下拉按钮了。
在我的网站上，我有几个引导-选择列表，所以我必须隐藏一个列表的下拉按钮，我想我必须添加一个类，如何添加类(或删除)只有一个引导选择列表(只有按钮，而不是整个列表)？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src=
浏览 2提问于2015-07-17得票数 1
回答已采纳
在这种情况下，我调用一个变量来显示用户是否已登录：
@{
var loggedInUser = User.Identity.GetUserName();
}
然后稍后我调用这个变量
<p> You are logged in as: @loggedInUser @Html.ActionLink("(Log Out)", "LogOut", "Account") </p>
我将如何设计@loggedInUser的样式？我无法为我的生活找到解决办法。
浏览 1提问于2014-07-11得票数 0
回答已采纳
我正在用js在c#中创建一个web应用程序，在其中我使用telerik组件，
问题是我的telerik下拉列表的自定义类是
.RadComboBox_Bootstrap {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
现在我要删除这个类，我执行了如下操作
$('.RadComboBox_Bootstrap').css({'font-family':''})
和
$('.RadComboBox_Bootstrap').css({
浏览 2提问于2018-11-27得票数 0
回答已采纳
5回答
我在JSP页面中有一个HTML文本区。当我连续按下一个按钮，光标到达行尾时，它会自动转到第二行。
当我得到这个文本并试图在<p>标记中打印它时，换行符消失了，整个文本出现在一行中，而不是像我输入的那样出现在单独的行中。有什么想法如何正确地用新行打印它吗？
浏览 2提问于2010-09-15得票数 1
回答已采纳
2回答
//Dynamically getting the windows width
var windowwidth = $(window).width() - 50;
//dynamically assigning the windowwidth value to the class(dynamically)
$(window).load(function () {
$('.cntnt').css('width', windowwidth + 'px');
})
$("#menu-toggle").click(funct
浏览 3提问于2016-04-16得票数 0
回答已采纳
我在angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css"中有in样式。为什么当我删除这些行并添加到每个组件@import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"中的每个css时，它不能像以前那样工作？
浏览 0提问于2018-04-17得票数 1
5回答
当我们使用bootstrap创建网页时，我们可以设置页边距。但网络浏览器也获得了一些利润。尽管根据CSS文件中的容器，以div(class="container-fluid")或margin:0; and padding:0;形式编写代码，但我无法解决这个问题。你能帮帮我吗?
浏览 0提问于2017-06-25得票数 4
1回答
我对我的应用程序中的样式有问题。我已经把我的style.css文件放到了静态文件夹中，但是当我把代码放进去的时候：
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
我的主页(body2.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
浏览 0提问于2017-08-08得票数 0
7回答
我有一个html文件，它有不想要的8px顶部边距：
当我检查它的时候，它显示了这样的东西：
什么源代码是“用户代理样式表”？
编辑
糟糕的是，当我发现并将<%#替换为<!--，将%>替换为-->时，我的bootstrap.css就被注释掉了。
<script src="/js/jquery.min.js"></script> <!-- http://api.jquery.com/ ?>
<link href="/css/bootstrap.min.css" rel="
浏览 12提问于2014-11-17得票数 0
回答已采纳
我有一个聊天窗口(使用<div>)，有时需要获取多行条目。到目前为止，我只是简单地将传入的\n替换为<br>，并使用.append()显示文本。不幸的是，我发现留下一个基于用户输入的裸.append()允许用户插入任意的HTML，然后由浏览器执行。在复制一个随机的StackOverflow页面到它(以测试大量发送)时发现了这个漏洞，其中有一个<link>标签，它会立即导致浏览器尝试下载CSS文件。
将此方法更改为使用.text()解决了该特定问题，但现在我无法显示换行符。HTML以文字文本形式出现，而不是<br>，而\n似乎没有任何效果。
有什么
浏览 1提问于2010-07-14得票数 2
回答已采纳
我在变量rolloutChanges中有两个git版本之间的文件更改列表-
<exec command="git diff -–name-only ${box.git_version} ${target.git_version}" outputProperty="rolloutChanges" dir="${dir.scratchpad}" />
我不确定这个变量应该如何进行理想的迭代，可能是通过在phing可以识别的其他标准格式中准备它。
我看到了这个答案，其中涉及的目标- ，但没有掌握那里正在发生的事情。我甚至无法在我的设置中运行
浏览 3提问于2016-03-18得票数 1
回答已采纳
我刚刚升级到IE10，并注意到我所有的下拉列表(选择列表)在“dropdown”状态下都有一个粗黑的边框，如下所示。我无法使用IE的内置工具检查元素，因此无法修复它！有人能帮上忙吗？
浏览 3提问于2013-05-21得票数 2
回答已采纳
2回答
我想显示一个下拉/选择作为bootstrap 4的输入。到目前为止，我在文档列表中找到的唯一选择的东西。它可以工作，但看起来不太像引导程序，并且不支持图标、分组分隔符和其他东西。有没有办法让select与bootstrap中的下拉列表功能相匹配？
类似这样，但仅作为某种形式的输入：
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown&
浏览 2提问于2017-01-11得票数 8
回答已采纳
3回答
带Angular 2+的引导程序
、、、、
我正在尝试在我的Angular模块中使用bootstrap中的主按钮。但它似乎不起作用。
以下是我到目前为止所做的工作。
npm install ngx-bootstrap --save
添加引导模块和导入。
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
impor
浏览 3提问于2018-08-28得票数 0
我似乎无法设置ng bootstrap typeahead的下拉菜单的样式。
输入本身的样式很好(组件只包含一个input/typeahead)，但不适用于下拉菜单(尝试使用插入的ngb-typeahead window以及.dropdown-menu类)。
浏览 0提问于2018-07-09得票数 2
1回答
我是twitter bootstrap的新手。我想知道有没有一种方法可以通过添加一些属性来防止将任何引导CSS或JS应用于DOM及其所有子对象。
喜欢
<div class="col-lg-9">Bootstrap applied</div>
<div data-no-bootstrap="true">
No boot strap should applied in this dom
</div>
这听起来可能很奇怪。但我想知道有没有办法。
浏览 0提问于2014-11-26得票数 0
我无法获得我的CSS样式来覆盖我的表标题对齐的Bootstrap的默认设置。这是我的桌子：
<table class="userProjectsTable" id="userLeadProjectsTable">
<tr class="userProjectsHeaderRow" id="userLeadTableHeaderRow">
<th>Project Title</th>
<th>Created Date</th&
浏览 5提问于2017-08-06得票数 0
回答已采纳
1回答
我有一个超类的树枝，它有下面的块：
{% stylesheets filter='css_url_rewrite,?yui_css'
'@MainBundle/Resources/public/css/bootstrap.css'
'@MainBundle/Resources/public/css/vendor/*.css'
'@MainBundle/Resources/public/css/_normalize.css'
浏览 0提问于2013-04-09得票数 1
4回答
我试图通过site.com/salesforce平台实现bootstrap，但是在导入CSS时，我可以同时导入bootstrap.css和bootstrap.min.css，但是bootstrap-responsive和bootstrap-responsive.min失败了，因为根据site.com的说法，“错误:CSS代码无法保存，因为它的格式不正确。请确保代码不包含无效字符，例如不匹配或缺少括号，然后重试”。
我认为这是因为css中的“@”，例如"@-ms-viewport"，但我找不到解决这个问题的方法。将会对任何解决这个问题的想法表示感谢。
浏览 0提问于2013-03-20得票数 1
3回答
我正在创建一个导航栏，它使用了一个无序列表。我想覆盖第一个样式，这样它看起来就不一样了。我尝试更改它的类，但实际的样式覆盖了它。谢谢
浏览 3提问于2010-01-05得票数 0
回答已采纳
3回答
我已经创建了自己的自定义导航栏。我将其保存在一个名为main-menu.php的文件中，我使用以下命令将其调用到标题中：
<?php
include "main-menu.php";
?>
主菜单组成如下：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.mi
浏览 0提问于2017-09-07得票数 1
1回答
无法使引导下拉到折叠
、、、、
所以我只是试着让几个导航链接下拉使用引导，但对于我的生活，我无法收回菜单。它们都是开放的(重叠的)，它们不会关闭(见下文)，我只需要正常地响应下拉列表，如果您单击一个新的，可能会自动关闭另一个下拉列表。代码：
<head>
<title>Flemington Supply | <?php echo $pageTitle; ?></title>
<script type='text/javascript' src="support/jquery.min.js"></script>
<
浏览 3提问于2015-05-04得票数 0
我在一个xsl文件中有一个包含<TEXTAREA></TEXTAREA> (没有空格)的转换，当它转换时，结果是
<TEXTAREA>
</TEXTAREA>
我找不到合适的属性来阻止这种情况的发生。
我们使用XslCompiledTransform和XmlTextWriter
谢谢。
浏览 2提问于2011-05-20得票数 0
回答已采纳
编辑: Fiddle似乎无法正确加载Twitter Bootstrap，因此我建议您将我的超文本标记语言和CSS代码复制粘贴到桌面上的一个空白.html文件中，然后使用该文件进行故障排除。请记住正确包含Twitter Bootstrap 3( CDN在下面的HTML代码中)，因为只有包含Bootstrap时才会出现问题。
这是我的小提琴/代码：
下面是小提琴中的代码：
HTML：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bo
浏览 0提问于2015-06-07得票数 1
3回答
我正在构建一个应用程序，我需要从标题中删除带有特定类的所有链接元素。我已经建立了一个例子来说明我在w3schools编辑器中遇到的问题。
为了再现这个问题，我在标题中添加了多个完全相同的链接，类为“链接到删除”：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
<link rel="stylesheet" hre
浏览 1提问于2019-04-17得票数 1
回答已采纳
2回答
我定义了一个简单的引导网格：
问题出在bootstrap中，我们这样定义网格
<div class="row">
<div class="col-md-4">
...
但在flexslider2中，我们需要包装成li，例如
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
但
浏览 0提问于2014-04-19得票数 2
1回答
我正在为一项调查设计一个问题显示页面。
我有一个循环中的问题集合，
如果问题数是奇数，第一个问题应该排在一行(col-12)，所有其他问题应该是每行两个(col-6，col-6)
如果问题数为偶数，则所有问题应为每行两个(col-6，col-6)
我如何在Bootstrap中做到这一点，设计应该是循环内的动态。
我在循环中尝试了一些选项，但无法正常工作。
浏览 21提问于2021-02-26得票数 0
1回答
我想在我的应用程序中使用，所以我将jar添加到类路径中，并在app.gwt.xml中继承它，到目前为止它还在工作(我对Bootstrap还不熟悉)。
到目前为止，我还没有使用UIBinders作为布局，如果可能的话，我希望这样做，因为我有一个非常动态的UI，它是以编程方式生成的，而且我对UIBinders几乎没有经验。但是，对于我想要从buttons中使用的元素，我已经创建了UIBinders (例如标题和按钮)。
问题在于，我使用UIBinders创建的使用gwtbootstrap元素创建的元素不仅看起来像gwtbootstrap元素，而且页面上的所有元素。
一个简单的例子:如果我使用引导元
浏览 1提问于2013-06-26得票数 2
回答已采纳
我有以下超文本标记语言和jQuery代码：
<div id="outer">
<p>
<p>paragraph inside division.</p>
<h2>a heading</h2>
<ul>
<li>first item</li>
<li>second item</li>
</ul>
</p>
</div>
jQuery：
$(func
浏览 2提问于2011-12-12得票数 3
回答已采纳
我把这个柜台从以前的帖子中拼凑在一起。我想把小数点改成逗号，但是我试了一下，脚本就停止工作了。此外，我如何才能得到欧元符号和数字的一行？我没有‘打破’任何地方，所以为什么它总是在一个不同的号码线？
HTML:
€<div class="counter">92.1</div> is the amount to pay
JavaScript:
function startCounter(){
$('.counter').each(function (index) {
var size = $(thi
浏览 2提问于2018-03-05得票数 0
回答已采纳
我正在iframe中加载一些内容。我希望这个内容的行为方式--如果它在<pre>标记内--也就是说，它尊重换行符。我正在使用javascript来设置这个iframe的body元素的样式。
我想知道是否有可能设置一个特殊的样式，使这个iframe的主体表现得像它在<pre/>中一样。
浏览 9提问于2010-12-30得票数 62
回答已采纳
css应用的主题不起作用。在过去，它是适用的，但我不知道我做了什么，它不再是可执行的。base.htmnl是其他页面的核心模板。 在base.html中，我有： <!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'nan
浏览 18提问于2020-03-21得票数 0
我在我的angular 2应用程序中使用了ng-bootstrap (如果您向下滚动它的"Basic Datepicker")，但希望应用自定义样式。这是怎么做到的呢？我在ng-bootstrap文档中没有看到任何关于它的东西。
浏览 1提问于2017-04-05得票数 4
我刚开始使用bootstrap，我想使用bootstrap进行简单的选择，但不知何故它毁了我的页面。我以为boostrap会覆盖我自己的css，但这不会发生，为什么？
<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<script href="jquery-3.2.1.min.js"></script>
<script href="bootstrap.min.js">&l
浏览 2提问于2017-12-01得票数 2
我的菜单以我想要的方式工作，除了菜单元素从上到下显示为自下而上的情况。我试图更改CSS属性，但仍然无法工作。我需要我的DIV容器在父容器的底部对齐。我使用了‘底部: 0’CSS属性，但这并没有任何影响使用‘位置:绝对’和‘位置:相对’。
如何将父DIV中的所有元素显示在底部:0(自下而上)？
然后单击Projects底部链接(如果需要重置菜单项，请刷新)。我需要同样的行为，我已经有，只是菜单项应该从下到上开始，并一直对齐到底部。
有什么建议吗？
谢谢,
帕蒂桑
浏览 3提问于2011-04-04得票数 0
回答已采纳
2回答
我刚开始使用Twitter Bootstrap，遇到了一个问题。
最近浏览了一些关于HTML5的教程，发现应该使用页眉、导航、页脚等语义元素而不是Div。
现在，在学习Bootstrap时，他们中的大多数人都在使用Div标签。
那么Bootstrap Div标签和HTML5语义标签哪个更好呢?为什么？
谢谢。
浏览 0提问于2014-03-03得票数 29
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
