ボックスシャドウ（ブートストラップ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>

出典

2016-04-04 Michael

これで今どのようにしたいですか？ – Manish62

私はあなたの例をフィールドセットで構築しました。管理が簡単で、あなた自身ですべてをスタイルすることができます。私はこれがあなたが望むものを達成する最良の方法だと思います。

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

出典

2016-04-04 07:32:03 Gijsberts

素晴らしいです、ありがとうございます！ :) – Michael

これを試してください。

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

出典

2016-04-04 12:25:37

ボックスシャドウ（ブートストラップ3）

答えて

関連する問題