twitter-bootstrap-3 相关问题

将标签与 Bootstrap Toggle 左侧对齐

我正在使用引导切换来创建开关，如下所示： 我正在使用引导切换来创建开关，如下所示： <form> <div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox"> <label> Toggle Text Left <input type="checkbox" data-toggle="toggle" /> </label> </div> </form> 有没有办法将标签移到开关左侧？我尝试将文本放在输入之前，但不太合适。 http://jsfiddle.net/sjxd1vpt/2/ 或者，如果您不是特别需要标签标签，您可以使用跨度。 <form> <div class="checkbox"> <input type="checkbox" data-toggle="toggle" checked="checked" /> <span> Toggle Text Right </span> </div> <div class="checkbox"> <span> Toggle Text Left </span> <input type="checkbox" data-toggle="toggle" /> </div> bootstrap-toggle css 似乎有一个 margin-left: -20px; 只需将自定义类添加到所需的左标签即可。 .left .toggle { margin-left: 5px; } 这将维持 Bootstrap-Toggle 预期的结构，以防它们有样式绑定，例如： label input { // some input targeted styling } http://jsfiddle.net/sjxd1vpt/5/ 您应该使用 bootstrap container-fluid 包装器来实现效果。 <form> <div class="checkbox container-fluid" > <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox container"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> 默认情况下，Bootstrap 将 float: left 添加到 .form-check-input 只需用 float: none 覆盖它并在 html 中的输入之前放置标签。 交换标签和输入 为容器div设置style="display:contents" 设置 style="float:none;margin-left:0.5rem" 输入 您的标签标签应在输入标签之前关闭。 <form> <div class="checkbox"> <label> Toggle Text Right </label> <input type="checkbox" data-toggle="toggle" checked="checked" /> </div> <div class="checkbox"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> </form> 这应该可以防止按钮切换与文本重叠。 这里：http://jsfiddle.net/sjxd1vpt/4/

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。 不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？ 如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

具有等效表行跨度和列跨度的引导网格

我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ 。容器 { 顶部边距：10px； } 我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ .container { margin-top: 10px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> </div> 我能够使用嵌套网格来做到这一点 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="row mx-auto" style="height: 200px;"> <div class="col-sm-6"> <div class="row "> <!-- nested row 1 --> <div class="col-sm-12 "> <!-- nested quick links col --> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> <div class="row"> <!-- nested row 2 --> <div class="col-sm-6"> BBBBBBB </div> <div class="col-sm-6"> CCCCCCCCC </div> </div> </div> </div> <div class="col-sm-3"> DDDDDD </div> </div> </div>

使用引导响应网格系统时如何为图像提供动态宽度和高度

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示： 这是加载后的样子： 你可以...

仅在验证表单时打开模式

我想仅在表单完全验证无错误时打开模式对话框。首先，我禁用了按钮，以便它首先验证，并且仅当表单为

在 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 个问题： 调整大小时菜单无法正确折叠（窗口变小） 将图标放在菜单链接旁边而不是下方 有...