gpt4 book ai didi

html - 删除 textarea 和 div 现在大小不同

转载 作者:太空宇宙 更新时间:2023-11-04 06:51:59 28 4
gpt4 key购买 nike

我已经花了好几个小时解决这个问题,但似乎找不到问题所在。我创建了 3 个 div,并使用 bootstrap 对它们进行定位和调整大小。当我单击提交时,我希望每个 div 中的文本区域消失,这确实发生了。然而,在textarea消失后,每个div都比上面的div宽了20px。我似乎无法找到这是从哪里来的。请给我一些想法。

Before submission(with the textarea)

After submission(without the textarea)

HTML 代码

<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="row">
<div id = "container-panels">
<div class="row">
<div class="l-board col-xs-8 col-xs-offset-2">
<h1 class="l-board-title"><b>Learning</b></h1>
@if(\Auth::user()->education()->count() == 0)
<form class="form-horizontal" role="form" method="POST"
action="{{ route('saveEducation') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('content') ? ' has-error' : '' }}">

<p class="l-board-content"><textarea required id="content"
class="form-control my-editor"
name="content"
placeholder="Please describe education goal..."
rows="5">{{ old('content') }}</textarea>
</p>
@if ($errors->has('content'))
<span class="help-block"><strong>{{ $errors->first('content') }}</strong></span>
@endif
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-9">
<button type="submit" class="btn btn-default">
Submit
</button>

<button type="button"
class="btn btn-default"
style="background-color: transparent; border-color: #bac2bd">
<a href="/home" style="color: #58595b">
Cancel
</a>
</button>
</div>
</div>

</form>
</div>
@else
{{\Auth::user()->education()->get()[0]['content']}}
@endif
</div>

<div class="row">
<div class="rel-board col-xs-8 col-xs-offset-2">
<h1 class="rel-board-title"><b>Relationship</b></h1>
@if(\Auth::user()->relationship()->count() == 0)
<form class="form-horizontal" role="form" method="POST"
action="{{ route('saveRelationship') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('relationshipContent') ? ' has-error' : '' }}">

<p class="l-board-content"><textarea required id="relationshipContent"
class="form-control my-editor"
name="relationshipContent"
placeholder="Please describe relationship goal..."
rows="5">{{ old('relationshipContent') }}</textarea>
</p>
@if ($errors->has('relationshipContent'))
<span class="help-block"><strong>{{ $errors->first('relationshipContent') }}</strong></span>
@endif
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-9">
<button type="submit" class="btn btn-default">
Submit
</button>

<button type="button"
class="btn btn-default"
style="background-color: transparent; border-color: #bac2bd">
<a href="/home" style="color: #58595b">
Cancel
</a>
</button>
</div>
</div>

</form>
</div>
@else
{{\Auth::user()->relationship()->get()[0]['relationshipContent']}}
@endif
</div>
<div class="row">
<div class="exp-board col-xs-8 col-xs-offset-2">
<h1 class="exp-board-title"><b>On-the-job Experience</b></h1>
@if(\Auth::user()->experience()->count() == 0)
<form class="form-horizontal" role="form" method="POST"
action="{{ route('saveExperience') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('experienceContent') ? ' has-error' : '' }}">

<p class="l-board-content"><textarea required id="experienceContent"
class="form-control my-editor"
name="experienceContent"
placeholder="Please describe experience goal..."
rows="5">{{ old('experienceContent') }}</textarea>
</p>
@if ($errors->has('experienceContent'))
<span class="help-block"><strong>{{ $errors->first('experienceContent') }}</strong></span>
@endif
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-9">
<button type="submit" class="btn btn-default">
Submit
</button>

<button type="button"
class="btn btn-default"
style="background-color: transparent; border-color: #bac2bd">
<a href="/home" style="color: #58595b">
Cancel
</a>
</button>
</div>
</div>

</form>
</div>
@else
{{\Auth::user()->experience()->get()[0]['experienceContent']}}
@endif
</div>
<button class="submit-btn" ><a href="/plan">Design Your Plan<i class="arrow-right"></i></a>
</button>
</div>
</div>
</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif

</div>
</div>
</div>
</div>
</div>

CSS 代码

#container-panels{
min-height: 935px;
}

#container-panels p{
margin: 0 11px;
}

.l-board:before {
content: '';
width: 30%;
height: 4px;
background: #a5d5a7;
position: absolute;
top: -4px;
left: 0px;
}

.l-board {
background-color: #F5FCF4;
height: 250px;
margin-top: 32px;
margin-left: 5%;
margin-bottom: 32px;
box-shadow: 0 0 10px #DDDDDD;
}

.l-board-title {
font-size: 14px;
color: #a5d5a7;
}


.rel-board:before {
content: '';
width: 80%;
height: 4px;
background: #ea7987;
position: absolute;
top: -4px;
left: 0px;
}

.rel-board {
background-color: #FAEDED;
height: 250px;
margin-left: 5%;
margin-bottom: 32px;
box-shadow: 0 0 10px #DDDDDD;
}

.rel-board-title{
font-size: 14px;
color:#ea7987;
}

.exp-board:before {
content: '';
width: 50%;
height: 4px;
background: #4a90e2;
position: absolute;
top: -4px;
left: 0px;
}

.exp-board {
background-color: #F0F5FA;
height: 250px;
margin-left: 5%;
margin-bottom: 32px;
box-shadow: 0 0 10px #DDDDDD;
}

.exp-board-title{
font-size: 14px;
color:#4a90e2;
}


.panel input {
width: 100%;
height: 125px;
margin-top: 10px;
}

.submit-btn {
position: absolute;
top: 905px;
left: 80%;
border-style: solid;
border-width: 1px;
border-color: #7f7f7f;
background-color: #ffffff;
color: #7f7f7f;
padding: 15px 32px;
padding-left: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1vw;
cursor: pointer;
z-index: 1;
}

.submit-btn a{
color: #7f7f7f;
text-decoration: none;
}

.submit-btn:hover{
transition-duration: 1s;
background-color: #F4F4F4;
}

.submit-btn a:hover{
color: #7f7f7f;
text-decoration: none;
}

.submit-btn i {
position: absolute;
border: solid #999999;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 8px;

}

i {
position: absolute;
border: solid #999999;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 8px;
}

.arrow-right {
padding: 0.6vw !important;
border-width: 0 0.15vw 0.15vw 0 !important;
margin-top:1px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

最佳答案

改变这些:

 </form>
</div>
@else
{{\Auth::user()->education()->get()[0]['content']}}
@endif
</div>

收件人:

  </form>
@else
<p class="l-board-content">
{{\Auth::user()->education()->get()[0]['content']}}
</p>
@endif
</div>
</div>

关于html - 删除 textarea 和 div 现在大小不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52784056/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com