如何在bootstrap中保持跨越div的边界

Question

我左边有一个盒子和一个大的div我想用浅色边框包裹它们。我希望borter是方形的。我怎样才能做到这一点。如果它有帮助，我还添加了进度条的样式。我想要一个带进度条圆圈周围阴影的边框。我正在使用bootstrap版本4

border pic

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">

                    <div class="col-md-3">
                                        <span class="border">

                        <br><br><br>
                        <div class="progress blue">
                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>
                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>
                            <div class="progress-value">90%</div>
                        </div>
                                        </span>
                </span>
                <br><br>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            List group item heading
                        </h4>
                        <p class="list-group-item-text">
                            ...
                        </p>
                    </div>

                    <div class="list-group-item justify-content-between">
                        Help <span class="badge badge-secondary badge-pill">14</span>
                    </div> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </div>
            </div>
            <div class="col-md-9">
                <br><br><br><br><br><br> <br><br><br>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="">Brief Information</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Education</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
                    </li>
                </ul>
                <form role="form">
                    <div class="form-group">

                        <label for="exampleInputEmail1">
                            Email address
                        </label>
                        <input type="email" class="form-control" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputPassword1">
                            Password
                        </label>
                        <input type="password" class="form-control" id="exampleInputPassword1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputFile">
                            File input
                        </label>
                        <input type="file" class="form-control-file" id="exampleInputFile" />
                        <p class="help-block">
                            Example block-level help text here.
                        </p>
                    </div>
                    <div class="checkbox">

                        <label>
                            <input type="checkbox" /> Check me out
                        </label>
                    </div> 
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </form>

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

Answer 1

我只添加了几个CSS，我希望它能帮到你。谢谢

.light-border {
   border: 1px solid #ccc;
}

并在light-border中添加<div class="row light-border">。

.light-border {
    border: 1px solid #ccc;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row light-border">

                    <div class="col-md-3">
                                        <span class="border">

                        <br><br><br>
                        <div class="progress blue">
                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>
                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>
                            <div class="progress-value">90%</div>
                        </div>
                                        </span>
                </span>
                <br><br>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            List group item heading
                        </h4>
                        <p class="list-group-item-text">
                            ...
                        </p>
                    </div>

                    <div class="list-group-item justify-content-between">
                        Help <span class="badge badge-secondary badge-pill">14</span>
                    </div> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </div>
            </div>
            <div class="col-md-9">
                <br><br><br><br><br><br> <br><br><br>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="">Brief Information</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Education</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
                    </li>
                </ul>
                <form role="form">
                    <div class="form-group">

                        <label for="exampleInputEmail1">
                            Email address
                        </label>
                        <input type="email" class="form-control" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputPassword1">
                            Password
                        </label>
                        <input type="password" class="form-control" id="exampleInputPassword1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputFile">
                            File input
                        </label>
                        <input type="file" class="form-control-file" id="exampleInputFile" />
                        <p class="help-block">
                            Example block-level help text here.
                        </p>
                    </div>
                    <div class="checkbox">

                        <label>
                            <input type="checkbox" /> Check me out
                        </label>
                    </div> 
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </form>

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