Absolute DIVコンテナブートストラップ4に表示されません -- html フィールド と css フィールド と twitter-bootstrap フィールド と bootstrap-4 フィールド 関連 問題

absolute div not show in container bootstrap 4












0
vote

問題

日本語

requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 2 の内側の requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 3 requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 3 requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 2 requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 3 requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 3 は、Bootstrap 4を使用して requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 2 の中)にこのコードを持っています。 / P>

コード:

<事前> <コード> requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 4

でも ( function(){ var $scope, $location; var indexApp = angular.module('indexApp',['ui.bootstrap', 'ngSanitize']); indexApp.controller('IndexController',function($scope,$sce,$http,$location,anchorSmoothScroll){ $scope.Lang = 'initVal'; $scope.ShowResults = false; $scope.ShowDesc = true; $scope.NoResults = false; $scope.currentPage = 1; $scope.maxPageNumbersToShow = 10; $scope.formModel = {}; $scope.searchMode = 0; $scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }]; $scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}]; $scope.Gender = [{'value':'Male'},{'value':'Female'}]; $scope.Languages = {}; $scope.Cities = {}; //$scope.lastAction = ''; $scope.searchParam = {}; $("input").removeAttr('disabled'); $scope.searchParam.Distance = $scope.miles[0]; $scope.GetCurrentZip = function (){ try{ var lon, lat; // console.log('starting geoposition code.'); if("geolocation" in navigator){ window.navigator.geolocation.getCurrentPosition(function(pos){ lat = pos.coords.latitude.toFixed(3); lon = pos.coords.longitude.toFixed(3); // console.log(lat + ' ' + lon); $http.get("/Brokers-en-us/includes/remote/ReturnCurrentZipcode.cfm?Lat=" + lat + "&Lon=" + lon) .then(function(response){ $scope.searchParam.Zip = response.data; }) }) } else{ console.log('No geolocation'); } } catch(err) { console.log(err.message); } } $scope.GetCityList = function (){ try{ $http.get("/Brokers-en-us/includes/remote/ReturnCityList.cfm") .then(function(response){ $scope.Cities = response.data.Cities; }) } catch(err){} } $scope.GetLangList = function (){ try{ $http.get("/Brokers-en-us/includes/remote/ReturnLangList.cfm") .then(function(response){ $scope.Languages = response.data.Languages; }) } catch(err){} } $scope.SearchProvider = function(searchParam){ try{ //debugger; $scope.searchMode = 1; var queryString=''; if($scope.formModel && $scope.formModel !== searchParam){ $scope.resultsCount = 0; currentPage = 1; } if(searchParam){ //debugger; $scope.formModel = searchParam; for(var param in searchParam){ if(searchParam.hasOwnProperty(param)){ var paramValue = searchParam[param].value ? searchParam[param].value : searchParam[param]; if (paramValue.length > 0) queryString += param + '=' + paramValue + '&'; } } } console.log(queryString); queryString= '?' + queryString + 'currentpage=' + $scope.currentPage; $http.get("/Brokers-en-us/includes/remote/ReturnProvidersList.cfm" + queryString) .then(function(response){ $scope.providers = response.data.provider; $scope.resultsCount = response.data.rowCount; if (!$scope.providers){ $scope.NoResults = true; $scope.ShowResults = false; $scope.ShowDesc = false; } else{ $scope.NoResults = false; $scope.ShowResults = true; $scope.ShowDesc = false; } }) } catch(err){ alert('No response.: ' + err.message); } } /*Testing purposes*/ $scope.clearTopForm = function(searchParam){ //console.log("I clicked this.") } /*Clears the drop downs and input fields*/ $scope.$watch('searchParam.Distance', function(newValue, oldValue) { //debugger; if(newValue != ''){ //$scope.lastAction = 'miles'; $scope.searchParam.City = ''; $scope.searchParam.Specialty = ''; $scope.searchParam.Gender = ''; } }); $scope.$watch('searchParam.Zip', function(newValue, oldValue) { if(newValue != ''){ //$scope.lastAction = 'miles'; $scope.searchParam.Gender = ''; $scope.searchParam.Specialty = ''; $scope.searchParam.City = ''; } }); $scope.cityChange = function(){ //debugger; if($scope.searchParam.City != ''){ //$scope.lastAction = 'city'; $scope.searchParam.Distance = ''; $scope.searchParam.Zip = ''; } } $scope.specialtyChange = function(){ //debugger; if($scope.searchParam.Specialty != ''){ //$scope.lastAction = 'specialty'; $scope.searchParam.Distance = ''; $scope.searchParam.Zip = ''; } } $scope.genderChange = function(){ //debugger; if($scope.searchParam.Gender != ''){ //$scope.lastAction = 'gender'; $scope.searchParam.Distance = ''; $scope.searchParam.Zip = ''; } } $scope.$watchGroup(['currentPage'], function(){ try{ if($scope.searchMode == 1){ $scope.SearchProvider($scope.formModel); } } catch(err){} }); $scope.GetCityList(); $scope.GetLangList(); $scope.GetCurrentZip(); $scope.gotoElement = function (eID){ //http://jsfiddle.net/brettdewoody/y65G5/ // set the location.hash to the id of // the element you wish to scroll to. //$location.hash('bottom'); // call $anchorScroll() var browserWidth = screen.availWidth; if (browserWidth < 768) anchorSmoothScroll.scrollTo(eID); }; }); indexApp.service('anchorSmoothScroll', function(){ this.scrollTo = function(eID) { // This scrolling function // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript var startY = currentYPosition(); var stopY = elmYPosition(eID); var distance = stopY > startY ? stopY - startY : startY - stopY; if (distance < 100) { scrollTo(0, stopY); return; } var speed = Math.round(distance / 100); if (speed >= 20) speed = 20; var step = Math.round(distance / 25); var leapY = stopY > startY ? startY + step : startY - step; var timer = 0; if (stopY > startY) { for ( var i=startY; i<stopY; i+=step ) { setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); leapY += step; if (leapY > stopY) leapY = stopY; timer++; } return; } for ( var i=startY; i>stopY; i-=step ) { setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); leapY -= step; if (leapY < stopY) leapY = stopY; timer++; } function currentYPosition() { // Firefox, Chrome, Opera, Safari if (self.pageYOffset) return self.pageYOffset; // Internet Explorer 6 - standards mode if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6, 7 and 8 if (document.body.scrollTop) return document.body.scrollTop; return 0; } function elmYPosition(eID) { var elm = document.getElementById(eID); var y = elm.offsetTop; var node = elm; while (node.offsetParent && node.offsetParent != document.body) { node = node.offsetParent; y += node.offsetTop; } return y; } }; }); indexApp.directive('allowPattern',[allowPatternDirective]); indexApp.directive('popPopup',[describePopup]); indexApp.directive('pop', function pop ($tooltip, $timeout) { var tooltip = $tooltip('pop', 'pop', 'event'); var compile = angular.copy(tooltip.compile); tooltip.compile = function (element, attrs) { var first = true; attrs.$observe('popShow', function (val) { if (JSON.parse(!first || val || false)) { $timeout(function(){ element.triggerHandler('event'); }); } first = false; }); return compile(element, attrs); }; return tooltip; }); indexApp.filter('PhoneNumber', function(){ return function(phoneNumber){ var dash = '-'; var openParen = '('; var closeParen = ') '; if(phoneNumber){ var pn = phoneNumber; pn = [pn.slice(0, 6), dash, pn.slice(6)].join(''); pn = openParen + [pn.slice(0, 3), closeParen, pn.slice(3)].join(''); return pn; } return phoneNumber; } }); indexApp.filter('Zip', function(){ return function(zipcode){ var dash = '-'; if(zipcode && zipcode.length > 5){ var zc = zipcode; zc = [zc.slice(0, 5), dash, zc.slice(5)].join(''); return zc; } return zipcode; } }); function allowPatternDirective(){ return{ restrict: "A", compile: function(tElement, tAttrs){ return function(scope, element, attrs){ element.bind("keypress", function(event){ var keyCode = event.which || event.keyCode; var keyCodeChar = String.fromCharCode(keyCode); if(!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))){ event.preventDefault(); return false; } }); } } } } function describePopup(){ return { restrict: 'EA', replace: true, scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, templateUrl: 'template/popover/popover.html' }; } })(); (function($) { // @todo Document this. $.extend($,{ placeholder: { browser_supported: function() { return this._supported !== undefined ? this._supported : ( this._supported = !!('placeholder' in $('<input type="text">')[0]) ); }, shim: function(opts) { var config = { color: '#888', cls: 'placeholder', selector: 'input[placeholder], textarea[placeholder]' }; $.extend(config,opts); return !this.browser_supported() && $(config.selector)._placeholder_shim(config); } }}); $.extend($.fn,{ _placeholder_shim: function(config) { function calcPositionCss(target) { var op = $(target).offsetParent().offset(); var ot = $(target).offset(); return { top: ot.top - op.top, left: ot.left - op.left, width: $(target).width() }; } function adjustToResizing(label) { var $target = label.data('target'); if(typeof $target !== "undefined") { label.css(calcPositionCss($target)); $(window).one("resize", function () { adjustToResizing(label); }); } } return this.each(function() { var $this = $(this); if( $this.is(':visible') ) { if( $this.data('placeholder') ) { var $ol = $this.data('placeholder'); $ol.css(calcPositionCss($this)); return true; } var possible_line_height = {}; if( !$this.is('textarea') && $this.css('height') != 'auto') { possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' }; } var isBorderBox = ($this.css('box-sizing') === 'border-box'); var isTextarea = $this.is('textarea'); var ol = $('<label />') .text($this.attr('placeholder')) .addClass(config.cls) .css($.extend({ position:'absolute', display: 'inline', 'float':'none', overflow:'hidden', textAlign: 'left', color: config.color, cursor: 'text', paddingTop: !isTextarea && isBorderBox ? '0' : $this.css('padding-top'), paddingRight: $this.css('padding-right'), paddingBottom: !isTextarea && isBorderBox ? '0' : $this.css('padding-bottom'), paddingLeft: $this.css('padding-left'), fontSize: $this.css('font-size'), fontFamily: $this.css('font-family'), fontStyle: $this.css('font-style'), fontWeight: $this.css('font-weight'), textTransform: $this.css('text-transform'), backgroundColor: 'transparent', zIndex: 99, }, possible_line_height)) .css(calcPositionCss(this)) .attr('for', this.id) .data('target',$this) .click(function(){ if (!$(this).data('target').is(':disabled')) { $(this).data('target').focus(); } }) .insertBefore(this); $this .data('placeholder', ol) .on('keydown', function () { ol.hide(); }) .on('blur change', function () { ol[$this.val().length ? 'hide' : 'show'](); }) .triggerHandler('blur'); $(window).one("resize", function () { adjustToResizing(ol); }); } }); } }); })(jQuery); jQuery(document).add(window).bind('ready load', function() { if (jQuery.placeholder) { jQuery.placeholder.shim(); } }); 15 positionは requestify.post('https://www.google.com/recaptcha/api/siteverify', { secret: '**********', response: req.body['g-recaptcha-response'], }) .then(function(response){ console.log(response.body); }) 7 でtrueを表示しません( 9988766618 の外側)。この問題を解決するにはどうすればいいですか?

デモ roreferrer"> jsfiddle

英語

I have this code for show div with absolute position inside div with container using bootstrap 4.

Code:

<div class="container position-relative">   <div class="position-absolute text-justify w-100">     text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo   </div> </div> 

But In action div with absolute position not show true in container(show outer of container). how do fix this problem?!

Demo jsfiddle

</div
           
   
   

回答リスト

1
 
vote
vote
ベストアンサー
 

あなたのDIVの位置を使うと奇妙に聞こえます。いずれにせよ、私はあなたのコンテンツを行に包むことをお勧めします:

 <コード> .container {     height: 500px;     background-color: #eee; }  
 <コード> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">    <div class="container position-relative">     <div class="row">         <div class="position-absolute text-justify w-100">             text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text             demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo             text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text             demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo             text demo text demo text demo         </div>     </div> </div>  
 

Using positions in your divs sounds strange. In any case I would suggest to wrap your content into a row:

.container {     height: 500px;     background-color: #eee; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">    <div class="container position-relative">     <div class="row">         <div class="position-absolute text-justify w-100">             text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text             demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo             text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text             demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo             text demo text demo text demo         </div>     </div> </div>
</div
 
 
0
 
vote

コンテナにはパディングがあり、再び、W-100を使用すると、100%、パディング、および100%の幅が矛盾することを意味します。コンテナからのパディングを削除するだけで問題が解決されます

 <コード> .container{   height:500px;   background-color:#eee;   padding: 0px; }  
 <コード> <div class="container position-relative">   <div class="position-absolute text-justify w-100">   <p>     text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo     </p>   </div> </div>  
 

There is padding in the container, again you use w-100 that means 100%, padding, and 100% width conflicting themselves. just remove the padding from container will solve the problem

.container{   height:500px;   background-color:#eee;   padding: 0px; }
<div class="container position-relative">   <div class="position-absolute text-justify w-100">   <p>     text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo     </p>   </div> </div>
</div
 
 

関連する質問

1  Bootstrap 4カードの境界にボタンを作る方法?  ( How to make button on bootstrap 4 card border ) 
CSSを使用して、カードの境界線になるブートストラップカード用のボタンを作る方法はありますか?下の写真のように: 私はドキュメントを閲覧していて、Bootstrap 4を使用して直接可能であることがわかりません。 ...

0  中央のコンテンツを小さなスクリーンで調整します  ( Center align content in small screens ) 
ブートストラップ4で新しい。 より小さな画面で整列されたコンテンツを残したグリッドシステムを作成しようとしています。 このスニペットを持っています: https://www.codeply.com/go/nngivbjnbd 「行」divにclass =...

0  アニメーションのときにjQuery UIがマージンを考慮しない場合に回避する  ( Work around for when jquery ui doesnt account for margins when animating ) 
-hello、世界! - タイトルは私が苦しんでいることのかなりまともな要約を与えます。私はこの正確な問題を抱えている質問が見つかりません、そして私が何か悪いことをしているなら私はわかりません。 要素に底部マージンがあるとき、ブラインドアニメーションを使...

-1  HTMLのフルページイメージスライダに画像が正しく負荷されていません  ( Image is not load properly in full page image slider in html ) 
私のウェブサイトのフルページ image スライダをロードしたいです。しかし、 image スライダー画像は正しく負荷ではありません。それはJavaScript関連の問題です。 これは私のスクリプト です <事前> <コード> $("#menutoggle"...

0  Bootstrap DatePicker Active Option  ( Bootstrap datepicker active option ) 
Bootstrap DatePickerを使用しています。アクティブなオプションをカスタムに変更します。今すぐ私のアクティブなオプションは、 "Today"という名前の最初のもので、私はカスタムデートの最後のものになりたいです。 ...

0  ブートストラップ:「COL IMG-Fluid」が画像とともにクラスで組み合わせると、画像の高さは変わりません  ( Bootstrap image height does not change if col img fluid combined in a class a ) 
画像の高さは変わりません: <事前> <コード> <!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"...

1  ブートストラップ4 - グリッドシステムと組み合わせた石積みレイアウト(2,3,4,6列のレイアウト)[重複]  ( Bootstrap 4 masonry layout combined with the grid system two three four and ) 
この質問はすでにここで回答を持っています ブートストラップ4 MasonryレイアウトFlexBox Grid (3回答) ...

-2  Webページ周辺の境界線を削除します  ( Removing borders around webpage ) 
ColorLibによるこのテンプレートで: https://colorlib.com/demo?theme=pemodule 私はウェブサイトの外側に紫色の境界線を取り除こうとしています。私はこの境界線がどのように達成されるか、そしてそれを取り除くことがで...

0  ブートストラップ4ボードカードの仕方?  ( How do bootstrap 4 board cards ) 
ブートストラップ4ベータを使用しています。 ボードカードやボードのトレロやgithubを作成する必要があります。私は私を助けることができるアイデアに感謝します。 私は→縦柱の中にそう思ったが、内側の列は12で狭い。 私はいくつかの画像をアイデアに残します: ...

0  Angular 5 request resconsiveを取得します  ( Angular 5 get request nonresponsive ) 
このサイトでこの問題に関しても多くの同様の問題を見ましたが、それらはあまりにも具体的すぎる傾向があります(Django、Python、Springなど)、あるいは時代遅れになっています。 私はAngular 5とBootstrapを使用しています。ゼロ出力で...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有