twitter-bootstrap - 带有H元素的框阴影在顶部(引导3)

我想做这个：

（我手动将H元素从阴影移到了线条上方）

但是，我无法将H元素（“我们做什么”）放在正确的位置。我当前的代码：

<div style="box-shadow: 0 0 3pt 2pt #0088cc;" class="col-md-12">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-lg" style="margin-top: -24px; width: 1202px; margin-left: -42px;">
                                    <h2>What we do</h2>
                                </div>
                            </div>
                        </div>
                        <div class="tabs tabs-bottom tabs-center tabs-simple">

                            <div class="tab-content">
                                <div class="tab-pane active" id="tabsNavigationSimpleIcons1">
                                    <div class="center">
                                        <h4>test</h4>


                                    </div>
                                </div>



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

最佳答案

我已经使用字段集构建了您的示例。它易于管理，您可以自己设置所有样式。我认为这是实现您想要的最好的方法。

<html>
 <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap 3 - Fieldset</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">


    <style type="text/css">

    body {
    background-color: black;
    color: white;
    }

    fieldset.whatwedo {
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0 0 3pt 2pt #0088cc;
            box-shadow: 0 0 3pt 2pt #0088cc;
    text-align: center;

}

legend.whatwedo {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
    background-color: black;
    color: white;
}

    </style>


</head>

<body>




<div class="container">


<fieldset class="whatwedo">
    <legend align="center" class="whatwedo"><h2>What we do</h2></legend>
    <div class="control-group">
        <p>What we do</p>
    </div>
</fieldset>


</div>



<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>

<script>


</script>

</body>

</html>