草庐IT

Bootstrap4

全部标签

html - Bootstrap 列表组中的垂直对齐文本

我正在尝试使用bootstrap3vertical-alignlist-group-item中的文本和按钮。我试图让父a有display:table;和内部divadisplay:table-cell;这样我就可以使用vertical-align:middle。但上面的方法无法解决问题,这里有一个codepen我创建了重现问题的方法。虽然出于某种原因,如果我在SO片段中发布相同的代码,它似乎可以正常工作。但是,当我在我的HTML文档中呈现它时,它不起作用。a{overflow:hidden;display:table;}a>div{display:table-cell;vertical

html - 使用 Bootstrap v4 验证 Nav-pills

我想在div的宽度上调整我的导航栏。问题是我使用Bootstrapv4并且nav-justify类尚不可用。代码如下:MesinscriptionsÉvénementspassésÉvénementsencoursÉvénementsfutursCréerunévénementMesévénements我不想在CSS中使用百分比来做到这一点;我想要响应式的东西。 最佳答案 确实缺少nav-justify类。暂时可以根据TB3的代码自行添加:SCSS代码://Justifiednavlinks//-------------------

html - 使用 Bootstrap v4 验证 Nav-pills

我想在div的宽度上调整我的导航栏。问题是我使用Bootstrapv4并且nav-justify类尚不可用。代码如下:MesinscriptionsÉvénementspassésÉvénementsencoursÉvénementsfutursCréerunévénementMesévénements我不想在CSS中使用百分比来做到这一点;我想要响应式的东西。 最佳答案 确实缺少nav-justify类。暂时可以根据TB3的代码自行添加:SCSS代码://Justifiednavlinks//-------------------

javascript - CSS Bootstrap 通过 javascript 创建元素

我正在尝试通过javascript创建以下HTML代码。出于某种原因,Bootstrap类未应用于javascript代码。有什么帮助吗?Comments我正在尝试使用javascript创建此HTML,如下所示。不确定我错过了什么。vardiv=document.createElement('div');div.class='form-group';varlabel=document.createElement('label');label.class='col-sm-2control-label';label.innerHTML='Comments';label.for='inpu

javascript - CSS Bootstrap 通过 javascript 创建元素

我正在尝试通过javascript创建以下HTML代码。出于某种原因,Bootstrap类未应用于javascript代码。有什么帮助吗?Comments我正在尝试使用javascript创建此HTML,如下所示。不确定我错过了什么。vardiv=document.createElement('div');div.class='form-group';varlabel=document.createElement('label');label.class='col-sm-2control-label';label.innerHTML='Comments';label.for='inpu

html - Bootstrap 可折叠聊天小部件问题

http://bootsnipp.com/snippets/featured/collapsible-chat-widget在上面的可折叠聊天小部件中,如果聊天处于打开状态,则无法单击与小部件处于同一级别的任何控件。有没有办法允许在聊天打开时单击其他控件? 最佳答案 问题可能是由于容器高度随着聊天小部件的扩展而增加,这将用全宽.container元素覆盖.container之外的任何内容。您可以通过删除周围的.container、.row和.col-md-5并将小部件包装在它的内部来避免这种情况自己的包装器设置宽度和display:

html - Bootstrap 可折叠聊天小部件问题

http://bootsnipp.com/snippets/featured/collapsible-chat-widget在上面的可折叠聊天小部件中,如果聊天处于打开状态,则无法单击与小部件处于同一级别的任何控件。有没有办法允许在聊天打开时单击其他控件? 最佳答案 问题可能是由于容器高度随着聊天小部件的扩展而增加,这将用全宽.container元素覆盖.container之外的任何内容。您可以通过删除周围的.container、.row和.col-md-5并将小部件包装在它的内部来避免这种情况自己的包装器设置宽度和display:

html - 在 Bootstrap 行的链接中包装图像

我花了比我愿意承认的更多的时间试图让一行图像成为row中的可点击链接。将图像对齐在row的中间不会破坏Bootstrap的响应能力。链接工作正常,但由于图像大小的变化(尽管它们都是高度紧凑的横向),对齐方式已关闭。我可以让图像在div.row内垂直对齐,但它会破坏响应能力并且图像无法正确调整大小。Here'saJSFiddleofwhatI'vetried这是我正在尝试做的事情:row--------------------------------------------------------||image1|image2|image3||----------------------

html - 在 Bootstrap 行的链接中包装图像

我花了比我愿意承认的更多的时间试图让一行图像成为row中的可点击链接。将图像对齐在row的中间不会破坏Bootstrap的响应能力。链接工作正常,但由于图像大小的变化(尽管它们都是高度紧凑的横向),对齐方式已关闭。我可以让图像在div.row内垂直对齐,但它会破坏响应能力并且图像无法正确调整大小。Here'saJSFiddleofwhatI'vetried这是我正在尝试做的事情:row--------------------------------------------------------||image1|image2|image3||----------------------

html - 如何用另一个默认图标替换 Bootstrap 下拉切换图标?

Bootstrap的dropdown-toggle类中是否有纯CSS方法来替换插入符图标?我希望它看起来像向下箭头或逻辑或符号(∨),如下所示:而不是原来的向下实心三Angular形插入符。我找到了替换原始图标大小的答案:.dropdown-toggle::after{display:inline-block;/*Default*/width:0;/*Default*/height:0;/*Default*/margin-left:.3em;/*Default*/vertical-align:middle;/*Default*/content:"";/*Default*/border-