twitter-bootstrap-3 相关问题

在 React 中有条件地应用类属性

我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示： 我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示： <TopicNav showBulkActions={this.__hasMultipleSelected} /> __hasMultipleSelected: function() { return false; //return true or false depending on data } var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span className="caret"></span> </button> <ul className="dropdown-menu" role="menu"> <li><a href="#">Merge into New Session</a></li> <li><a href="#">Add to Existing Session</a></li> <li className="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> </div> ); } }); 然而，{this.props.showBulkActions ? 'show' : 'hidden'}什么也没发生。我在这里做错了什么吗？ 花括号位于字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该可行： <div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}> 注意“向右拉”后面的空格。您不想意外提供类“pull-rightshow”而不是“pull-right show”。括号也需要在那里。 正如其他人评论的那样，classnames实用程序是当前推荐的在 ReactJs 中处理条件 CSS 类名的方法。 在您的情况下，解决方案将如下所示： var btnGroupClasses = classNames( 'btn-group', 'pull-right', { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } ); ... <div className={btnGroupClasses}>...</div> 顺便说一句，我建议您尽量避免同时使用 show 和 hidden 类，这样代码会更简单。最有可能的是，您不需要为默认显示的内容设置类。 2021 年附录： 为了提高性能，您可以查看 clsx 作为替代方案。 如果您使用的是转译器（例如Babel或Traceur），您可以使用新的ES6“模板字符串”。 这是@spitfire109的答案，进行了相应修改： <div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}> 这种方法允许您做类似的巧妙事情，渲染 s-is-shown 或 s-is-hidden: <div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}> 您可以简单地执行以下操作。 let classNameDependsOnCondtion = i18n.language == 'en' ? "classname" : ""; className={`flex flex-col lg:flex-row list-none ${classNameDependsOnCondtion }`} 或 className={`flex flex-col lg:flex-row list-none ${i18n.language == 'en' ? "classname" : ""}`} 您可以在此处使用字符串文字 const Angle = ({show}) => { const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`; return <i className={angle} /> } 更换： <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">` 与： <div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`} 如果您只需要一个可选的类名： <div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}> 或者使用 npm classnames。它非常简单且有用，特别是对于构建类列表 扩展@spitfire109的好答案，可以做这样的事情： rootClassNames() { let names = ['my-default-class']; if (this.props.disabled) names.push('text-muted', 'other-class'); return names.join(' '); } 然后在渲染函数中： <div className={this.rootClassNames()}></div> 保持 jsx 简短 您可以使用 ES6 数组代替类名。 答案基于 Axel Rauschmayer 博士的文章：有条件地在数组和对象文字中添加条目。 <div className={[ "classAlwaysPresent", ...Array.from(condition && ["classIfTrue"]) ].join(" ")} /> 2019： React 拥有很多实用工具。但你不需要任何 npm 包。只需在某个地方创建函数 classnames 并在需要时调用它即可； function classnames(obj){ return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' '); } 或 function classnames(obj){ return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' '); } 示例 stateClass= { foo:true, bar:false, pony:2 } classnames(stateClass) // return 'foo pony' <div className="foo bar {classnames(stateClass)}"> some content </div> 只是为了灵感 声明辅助 DOM 元素并使用它的原生 toggle 方法： (DOMToken​List)classList.toggle(class,condition) 示例： const classes = document.createElement('span').classList; function classstate(obj){ for( let n in obj) classes.toggle(n,obj[n]); return classes; } <div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> .filter(Boolean) 从数组中删除“错误”值。由于类名必须是 strings，因此除此之外的任何内容都不会包含在 new 过滤数组中。 console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') ) 上面写成函数： const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') ) 更优雅的解决方案，更利于维护和可读性： const classNames = ['js-btn-connect']; if (isSelected) { classNames.push('is-selected'); } <Element className={classNames.join(' ')}/> 就用这个方法-- <div className={`${this.props.showActions ? 'shown' : 'hidden'}`}> 这更加整洁干净。 你可以使用这个： <div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}> 当您要附加多个类时，这非常有用。您可以使用空格将所有类连接到数组中。 const visibility = this.props.showBulkActions ? "show" : "" <div className={["btn-group pull-right", visibility].join(' ')}> 我尝试定制我的答案，以在帖子中包含所有可能的最佳解决方案 有很多不同的方法可以完成此任务。 1.类内嵌 <div className={`... ${this.props.showBulkActions ? 'show' : 'hidden'}`}> ... </div> 2.使用这些值 var btnClass = classNames( ... { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } ); 3.使用变量 let dependentClass = this.props.showBulkActions ? 'show' : 'hidden'; className={`... ${dependentClass }`} 4.使用 clsx <div className={clsx('...',`${this.props.showBulkActions ? 'show' : 'hidden'}`)}> ... </div> 这对你有用 var TopicNav = React.createClass({ render: function() { let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`; return ( ... <div className={_myClasses}> ... </div> ); } }); 参考@split fire的答案，我们可以用模板文字来更新，这样可读性更强，供参考查看javascript模板文字 <div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}> 您可以使用this npm 包。它处理所有事情，并具有基于变量或函数的静态和动态类的选项。 // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } }); <div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1" 根据this.props.showBulkActions的值，您可以动态切换类别，如下所示。 <div ...{...this.props.showBulkActions ? { className: 'btn-group pull-right show' } : { className: 'btn-group pull-right hidden' }}> 我想补充一点，您还可以使用可变内容作为课程的一部分 <img src={src} alt="Avatar" className={"img-" + messages[key].sender} /> 上下文是机器人和用户之间的聊天，样式根据发送者的不同而变化，这是浏览器结果： <img src="http://imageurl" alt="Avatar" class="img-bot"> 根据参数（如果存在）返回正确类的函数 getClass(param){ let podClass = 'classA' switch(param.toLowerCase()){ case 'B': podClass = 'classB' break; case 'C': podClass = 'classC' break; } return podClass } 现在只需从要应用相应类的 div 调用此函数即可。 <div className={anyOtherClass + this.getClass(param)} 我成功地使用此逻辑将正确的颜色应用到我的引导表行。 <div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div> 不要忘记在静态类名称后面添加额外的空格。

Bootstrap 3 - 输入组中的按钮不在同一高度

我使用Bootstrap 3，使用输入组，使用按钮并使用glyphicon作为按钮，但奇怪的是按钮的高度不一样，如何使按钮的高度相同？ 我的简单codi...

显示带有 Angular js 数据绑定表单的引导箱

我两周前开始使用 Angular JS，并对它的数据绑定功能感到非常惊讶。 我也非常喜欢使用 bootboxjs 向用户显示消息和所有信息。 ...

引导程序左右填充不起作用

我正在学习引导程序，今天我想处理边距和填充，但是处理这些时，每当我应用整体填充或填充顶部或填充时，我都会面临引导程序的奇怪行为

将焦点输入放在模态显示上

如何在模态显示上自动聚焦输入？目前我这样做，但它不起作用： jQuery(文档).ready(函数($) { $('#myModal').on('show.bs.modal', function() { $('输入[名称=“

如何让div垂直居中对齐？

我用 bootstrap 3 创建了这一行：

从 Bootstrap 3.0.2 迁移到 3.4.1

我搜索了谷歌但找不到任何迁移指南。 我正在开发一个使用 Bootstrap 3.0.2 的网站，由于 <3.4...

Bootstrap 3.4.0 是否包含任何重大更改？

你们有人知道 Bootstrap 3.4.0 是否包含重大更改（与 3.3.x 相比）？该版本的公告博客文章没有说明其中之一。

如何使用提交按钮链接页面？

登录 这是来自 bootstrap 的示例代码，我如何在此按钮中添加链接，同时保留...

Bootstrap - 根据屏幕尺寸使用不同的类

我只想在屏幕尺寸为 xs 时添加表单控件类。现在，表单控件已添加到所有屏幕尺寸中。我怎样才能做到...

关闭回调时的下拉菜单

嗨，如果引导程序的下拉菜单关闭，我正在尝试执行一个函数。当然，如果单击菜单下拉切换，我可以添加函数调用。但我担心的是，如果用户这样做了怎么办……

Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题

我正在使用 Bootstrap 'row' 类将 div 一个放在另一个上面，效果很好，但是 。排 { 左边距：-15px； 右边距：-15px； } 我注意到它指定了 margin-lef...

Bootstrap 4 中的 .btn-default 去哪儿了？

根据 Bootstrap 3 到 Bootstrap 4 迁移文档： 纽扣 将 .btn-default 重命名为 .btn-secondary。 但 Bootstrap 4 .btn-secondary 看起来一点也不像旧的默认按钮。

如何让<li>项目宽度适合文本长度？

如何使项目宽度适合Bootstrap 3中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。 这是它发生的导航栏... 如何使 <li> 项目宽度适合 Bootstrap 3 中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。 这是它发生的导航栏： <div id="menu" class="col-md-1"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Startseite</a></li> <li><a href="kontakt.php">Kontakt</a></li> </ul> </div> 开设.custom_li课程并给予 .custom_li{ display:inline-block; } 编辑 为了强制相同的尺寸，我建议使用 max-width 并将其放在一些 media-query 下 li{ display: inline-block; max-width:50%; /* limit width */ word-break:break-all; /* wrap extended text*/ border:1px solid red /* demo */ } 演示在这里 一些可选的东西 一些可选的东西 当我尝试display: inline-block;时，它会移除子弹。 相反，我使用 float:left; 让它们仅与文本一样宽，同时保留项目符号。 （可选）添加 clear:both; 以将其保留为垂直列表，每个项目都在新行上。 CSS .my-list > li { float: left; clear: both; /* remove this if you want them flowing inline */ } HTML <ul class="my-list"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> </ul> 如果 display: inline-block; 或 display: block; 弄乱了对齐。 然后就用width: fit-content; 通过将 display: inline-block; 添加到适当的元素来防止它成为块。 如果您想要详细信息，请发布更多代码，最好是 CSS。 我让它可以与以下 css 一起使用： ul { margin: 0 auto; width: fit-content; } li{ display:flex; margin: 0.5rem auto; } 基本上我所做的就是使容器宽度适合内容。使用CSS hack来确保它会使用边距居中。在 li 标签中，我希望内容居中，所以我这样设置 使用 display: inline-block 折叠了我的列表项，这是我不想要的。使用 display: block; width: fit-content 就是解决方案。

导航菜单不起作用

如何解决引导导航栏面临的这 3 个问题： 调整大小时菜单无法正确折叠（窗口变小） 将图标放在菜单链接旁边而不是下方 有...

Vanilla js 引导布局问题

我正在尝试从 Pixabay api 中获取图像数据，我想显示编辑器选择的图像。 问题在于布局。我试图在每行显示 3 或 4 个图像，但布局是

如何仅使用引导图标？

我有一个带有自己的css文件的项目。 现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要任何其他东西。我进入自定义页面自定义我的

Bootstrap 中的两个并排表格

是否可以在 Bootstrap 3 中并排显示两个表格？ 每个人都尝试制作每一个 col-md-6，虽然它缩小了宽度，但它们不会彼此相邻包装（相反，一个是在......

为什么当我单击齿轮图标时没有出现我的 Bootstrap 下拉菜单？

我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ 我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i> </h4> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <!-- Add more menu items as needed --> </ul> </div> </body> 您有一些与 docs 和良好的语义标记不相符的内容： 切换器应该是一个按钮。标题不是可点击的元素，不应该这样使用，以实现可访问性。 下拉菜单必须是其切换器的下一个兄弟。这意味着将其放入标题元素内。不幸的是，从语义角度来看这也很糟糕，因此请考虑重构布局来解决这个问题。 不要省略文档中显示的 ARIA 属性，也是为了可访问性。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </h4> </div> </body> 这是我的“最终”代码，包含@isherwood 的更改 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="d-flex align-items-center"> <h4 style="display: inline;">Drop down menu test:</h4> <div class="dropdown" style="display: inline-block;" > <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="bi bi-gear"></i> </button> <ul class="dropdown-menu" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body>

使用 $.cookie() 的 cookies 保存多个面板的折叠状态

我正在尝试确定如何使用 $.cookie 保存可折叠面板的折叠状态。 到目前为止，这个问题很有帮助，但仍然缺少最终的解决方案。 我有什么解决方案...