Question

我想这样做：

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

然而，我无法在正确的位置拥有H元素（＆＃34;我们做什么＆＃34;）。我目前的代码：

value

Answer 1

我用fieldset构建你的例子。它易于管理，您可以自己设计。我认为这是达到你想要的最佳方式。

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

Answer 2

试试这个。

<div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-lg" style="margin-top: -24px; margin-left: -42px;">
   <h2 class="text-center" style="background: #ffffff;width: 23%; margin-left: 40%; margin-top: 2px;">What we do</h2> 
</div>

顶部有H元素的盒子阴影（Bootstrap 3）

2 个答案: