Question

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

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);
    }

Answer 1

更改这些：

 </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>

删除textarea和div现在大小不同

1 个答案: