twitter-bootstrap 相关问题

<div class="input-group"> <input th:unless="${value== 3}" class="form-control" type="text" id="reasonInput" /> <button type="button" class="btn btn-danger text-white btn-sm" id="registerB" > Register </button> </div> 当我的价值与3个不同时，一切正常。但是，当将其设置为3时，输入元素将隐藏在块代码中，仅剩下的按钮。问题是与输入的大小相比，按钮的大小已更改。请帮助我，有什么方法可以保留相同的尺寸，而无需自定义CSS。问题之所以出现，是因为当隐藏时，.input组的布局会更改，从而影响按钮的大小和对齐。 <div class="input-group"> <input th:classappend="${value == 3} ? 'd-none' : ''" class="form-control" type="text" id="reasonInput"/> <button type="button" class="btn btn-danger text-white btn-sm" id="registerB"> Register </button> </div> Alterthate溶液<div class="input-group"> <input th:style="${value == 3} ? 'visibility: hidden; width: 1px; height: 1px; padding: 0; margin: 0; border: none;' : ''" class="form-control" type="text" id="reasonInput"/> <button type="button" class="btn btn-danger text-white btn-sm" id="registerB"> Register </button> </div>

twitter-bootstrap thymeleaf

回答 1 投票 0

在中心[重复]

我希望所有内容都位于页面的中心，也需要做出响应。这是我带有PHP的代码，因为我正在使用循环显示所有复选框。 <div class="container-fluid">  <form method="post" class="form-horizontal">  <?php for ($i=0; $i < 8; $i++) { echo "<div class='row'> <div class='col-md-4'> <div class='col-md-2'><input type='checkbox' class='form- control chk_boxes2' name='check_list[]'></div> <label class='col-md-2'>Medewerker</label> </div> <div class='col-md-4'> <div class='col-md-2'><input type='checkbox' class='form- control chk_boxes2' name='check_list[]'></div> <label class='col-md-2'>Medewerker</label> </div> <div class='col-md-4'> <div class='col-md-2'><input type='checkbox' class='form- control chk_boxes2' name='check_list[]'></div> <label class='col-md-2'>Medewerker</label> </div> </div>"; } ?>  <div class="row down right"> <div class="col-md-6"> <label class="col-md-3">Check all</label> <div class="col-md-3"><input type='checkbox' class="chk_boxes form-control"> </div> <div class="col-md-6"> <input type="submit" name="Verder" value="Verder" class="form-control btn-primary"> </div> </div> </form>  </div> 这是我现在使用的jQuery，我知道这没什么可靠的：$('.down').css('margin-top', function () { return ($(window).height() - $(this).height()) / 2.8 }); $('.right').css('margin-left', function () { return ($(window).height() - $(this).height()) / 2 }); 这是指向JSFIDDLE的链接，您确实需要扩展它，因为大屏幕是这里的主要问题。 Https：//jsfiddle.net/wq0r0se4/ 在你的text-align: center上卸下左JS update your小提琴https：//jsfiddle.net/wq0r0se4/1/

javascript html jquery css twitter-bootstrap

回答 1 投票 0

HTML5标签标签与IT下方的内容重叠

css html twitter-bootstrap

回答 3 投票 0

bootstrap：中心的内容[重复]

jquery html css twitter-bootstrap

回答 1 投票 0

如何在开放层中创建新的变焦按钮？

我创建了两个按钮（使用bootstrap）以缩放进出： <div class="btn-toolbar" id="buttontoolbar"> <div id="newSim", class="btn-group-vertical"> <button type="button" title="Zoom in", class="btn btn-default",id="olZoomOutLink"><img src="plus.svg"></button> <button type="button" title="Zoom out", class="btn btn-default", id="customZoomOut"><img src="minus.svg"></button> </div> </div> 我还关闭了打开层的默认缩放按钮： var map = new ol.Map({ controls: ol.control.defaults({ zoom: false, }) }) 现在我的问题是，如何使我的两个按钮用于缩放和缩放？ thanks！在HTML文件中创建HTML按钮后，您可以通过引用HTML的ID对每个控件添加一个控件。之后，请在地图上收听点击事件。 var zoomType; document.getElementById('customZoomOut').onclick = function() { zoomType="customZoomOut"; }; document.getElementById('olZoomOutLink').onclick = function() { zoomType="olZoomOutLink"; }; var map = new ol.Map({ target: 'map', layers: [new ol.layer.Tile({ source: new ol.source.OSM() })], view: new ol.View({ center: [0, 0], zoom: 2 }) }); map.on('click', function(evt) { if(zoomType=="olZoomOutLink"){ var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom - 1); } if(zoomType=="customZoomOut"){ var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 1); } }); <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> <div class="btn-toolbar" id="buttontoolbar"> <div id="newSim" , class="btn-group-vertical"> <button type="button" title="Zoom in" class="btn btn-default" id="olZoomOutLink"><img src="plus.svg"></button> <button type="button" title="Zoom out" class="btn btn-default" id="customZoomOut"><img src="minus.svg"></button> </div> </div> 添加了OL和动画的较新版本。默认按钮的行为是不同的。因此，这是一个没有setZoom()的解决方案。这有点通用，因此请调整到您的框架 <button onclick="zoomTo(+1)">+</button> <button onclick="zoomTo(-1)">-</button> 和此功能 zoomTo(amount){ const view = map.getView(); const zoom = view.getZoom(); view.animate({ zoom: zoom + amount}) } 定义映射时禁用正常控件：new Map({ ... controls: [] }) 您可以通过动态调整视图缩放级别来在OpenLaylayers中创建自定义缩放按钮。下面的功能平稳地将缩放缩放为in或out： Solution： function onZoom(value: number): void { const view = map.getView(); if (!view) return; const currentZoom = view.getZoom() ?? 0; const newZoom = view.getConstrainedZoom(currentZoom + value); // Cancel any ongoing zoom animations to prevent conflicts if (view.getAnimating()) { view.cancelAnimations(); } // Custom easing function for smooth zooming const easeIn = (t: number) => 1 - Math.pow(1 - t, 3); // Animate the zoom transition view.animate({ zoom: newZoom, duration: 250, // Adjust duration as needed easing: easeIn, }); } usage： <button onClick={() => onZoom(+1)}>Zoom In</button> <button onClick={() => onZoom(-1)}>Zoom Out</button>

twitter-bootstrap gis openlayers openlayers-3

回答 3 投票 0

bootstrap navbar与另一个div

我正在尝试在（简单）传单图中添加一个简单的Navbar。我遇到问题，将Navbar和每个设置的地图设置为自己的容器。这里是我的代码：

twitter-bootstrap leaflet

回答 1 投票 0

bootstrap静态列宽度

这比什么都更像是一个最佳实践问题。因此，假设我在Bootstrap中有两个COLS，我希望将正确的Col设置为300px，直到达到768px断点，然后将其堆叠。 ...

css twitter-bootstrap twitter-bootstrap-3 responsiveness

回答 2 投票 0

有可能通过bootstrap响应式CSS实现拖放？

我们使用Angular，jQuery，Kendo，Bootstrap等创建动态应用程序（布局），该应用程序由容器和内容框组成。我的要求是实现拖放（这意味着任何...

javascript jquery css angularjs twitter-bootstrap

回答 2 投票 0

有人可以帮我吗？

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> #myCarousel { height: 500px } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } canvas { position: relative; /*pointer-events:none;*/ top: 0; left: 0 } /* Particles Canvas*/ #particles-js{ height: 500px; width: 100%; background-color: #D0EDF5; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } </style> </head> <body> <div class="container"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <h1>First Slide</h1> </div> <div class="item"> <div id="particles-js"></div> </div> <div class="item"> <h1>Third Slide</h1> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script type="text/javascript"> particlesJS('particles-js', { "particles": { "number": { "value": 60, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#0A8B80" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 50 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 20, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#65BBC4", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 80, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#D0EDF5", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } ); </script> </body> </html>

javascript twitter-bootstrap canvas carousel particles.js

回答 1 投票 0

<code> <button class="btn btn-primary" @click="triggerfunction()">MyButton</button> </code>

检查CSS后，我意识到触摸的BTN处于悬停状态。因此，我只是用以下CSS阻止它：

javascript twitter-bootstrap vue.js bootstrap-4

回答 1 投票 0

Bootstrap按钮在移动台上触摸而不是台式机时会“卡在”中。 vuejs

<button class="btn btn-primary" @click="triggerfunction()">MyButton</button>

javascript twitter-bootstrap vue.js bootstrap-4

回答 1 投票 0

twitter-bootstrap 相关问题

最新问题