Box Schatten mit H-Elemente an der Spitze (Bootstrap 3)

Ich möchte, dies tun:Box Schatten mit H-Elemente an der Spitze (Bootstrap 3)

(ich manuell das H-Element oberhalb der Linie aus dem Schatten bewegte)

Ich bin jedoch nicht in der Lage, das H-Element ("Was wir machen") an der richtigen Stelle zu haben. Mein aktueller Code:

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

Quelle

2016-04-04 Michael

was willst du jetzt in diesem? – Manish62

Ich habe Ihr Beispiel mit einem Fieldset erstellt. Es ist einfach zu verwalten und Sie können alles selbst gestalten. Ich denke, das ist der beste Weg, um das zu erreichen, was Sie wollen.

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

Quelle

2016-04-04 07:32:03 Gijsberts

Super, vielen Dank! :) – Michael

Versuchen Sie dies.

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

Quelle

2016-04-04 12:25:37

Box Schatten mit H-Elemente an der Spitze (Bootstrap 3)

Antwort

Verwandte Themen