2017-05-09 10 views
-2

ブートストラップパネルを作成しようとしています。私はパネルを展開するリンクをパネルタイトルの左または中央のいずれかに合わせるように調整したいと思います。ユーザーが右クリックして展開するようにメッセージを出したいのですが。どのように私はこれを行うのですか?私はすべてのインラインを表示し、クリアを使用してみました:なし、しかしそれは私のために働いていないようです。ここで同じ行にh1タグとh3タグを1つずつ並べる方法

は私のhtmlコードは次のとおりです。H3float: leftにH1float: rightを適用

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <style> 
     body { 
     background-color: gray; 
     padding: 25px; 
     } 
     .bg_gray { 
     background-color: rgb(237, 14, 40); 
     color: white; 
     padding: 15px; 
     } 
     .bg_gray a { 
     color: white; 
     text-decoration: underline; 
     } 
     .navbar { 
     background-color: red; 
     color: white; 
     } 
     .panel-title a{ 
     color: rgb(237, 14, 40); 
     display: inline; 
     clear: none; 
     } 
     .panel-body { 
     background-color: rgb(237, 14, 40); 
     color: white; 
     } 
     .panel { 
     background-color: white; 
     color: rgb(237, 14, 40); 
     } 
     .lg_expand { 
     font-size: 1.5em; 
     display: inline; 
     clear: none; 
     text-align: left; 
     } 
     .sm_expand { 
     font-size: .8em; 
     display: inline; 
     clear: none; 
     text-align: right; 
     } 
    </style> 
    <meta charset="utf-8"> 
    <title>Phillies First Round Draft Success</title> 
    </head> 
    <body> 
    <div class = "container bg_gray"> 
     <nav class = "navbar navbar-inverse navbar-fixed-top"> 
     <div class = "container"> 
      <a class = "navbar-brand" href = "home.html">PhillyPhigures.com</a> 
      <ul class = "nav navbar-nav"> 
      <li><a href = "phillies_articles.html">Phillies</a></li> 
      <li><a href = "eagles_articles.html">Eagles</a></li> 
      <li><a href = "flyers_articles.html">Flyers</a></li> 
      <li><a href = "sixers_articles.html">Sixers</a></li> 
      </ul> 
     </div> 
     </nav> 
     <center><h1>Do the Phillies Draft Successfully in the First Round?</h1></center> 
     <center><h4>~Tyler Grim | May 8, 2017</h4></center> 
     <hr/> 
     <p>With the Major League Baseball Amateur Draft set for June 12, 2017, 
     and the Philadelphia Phillies holding the 8th pick in that draft, 
     many Phillies fans are left wondering whether the next big thing will 
     be brought to Philadelphia.</p> 
     <p>Last season, the Phillies drafted Mackenzie "Mickey" Moniak with the 
     first overall pick in the 2016 MLB Draft. Moniak joined Pat Burrell as 
     the only players selected first overall by the Phillies in the amateur 
     draft. Burrell had a long successful career with the Phillies after 
     being drafted #1 overall in 1995 Amateur Draft. Phillies fans would be more 
     than pleased to see Moniak produce the way Burrell did in his nine seasons 
     with Philadelphia. 
     </p> 
     <hr/><center>Pat Burrell Career Phillies Stats</center><hr/> 
     <table class = "table"> 
     <tr> 
      <th>Years</th><th>WAR</th><th>AB</th><th>R</th><th>H</th><th>2B</th><th>3B</th><th>HR</th><th>RBI</th><th>BA</th><th>OBP</th><th>SLG</th> 
     </tr> 
     <tr> 
      <td>9</td><td>18.8</td><td>4535</td><td>655</td><td>1166</td><td>253</td><td>14</td><td>251</td><td>827</td><td>.257</td><td>.367</td><td>.485</td> 
     </tr> 
     </table> 
     <hr/><center>Stats Courtesy of <a href = "http://www.baseball-reference.com">Baseball-Reference</a></center><hr/> 
     <p>However, have the Phillies always enjoyed success in drafting in the first round of the amateur draft Let's take a look at the 
     Phillies recent first round draft picks to see how they've performed.</p> 
     <div class = "panel-group"> 
     <div class = "panel panel-default"> 
      <div class = "panel-heading"> 
      <h4 class = "panel-title"> 
       <a data-toggle="collapse" href="#collapse1"> 
       <h1 class = "lg_expand"><strong>2016</strong>: Mickey Moniak | OF | Costa Canyon HS, CA</h1> 
       </a> 
       <h3 class = "sm_expand">(click to expand)</h3> 
      </h4> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse"> 
      <div class = "panel-body"> 
       <p>Moniak is currently the Phillies second rated prospect, behind only JP Crawford, and is the #16 prospect in all of baseball. 
       Moniak projects to be a future outfielder in the Phillies system and has turned heads so far in the Gulf Coast League and 
       with Lakewood. Moniak currently sports a BA/OBP/SLG of .283/.339/.394, in 28 games with Lakewood so far in 2017.</p> 
      </div> 
      </div> 
     </div> 
     </div> 

答えて

0

、ちょうどclear: bothはそれを行う必要がありませんH4終了タグの前に空白のdivを追加しています。さらに、必要に応じて、カスタムマージンを設定するためにそのdivのスタイルを設定することもできます。このような

何かが

https://codepen.io/anon/pen/GmyyJP

+0

を?:空白のdivが開かれ、H4の前に近くにすべきですか? – tygrim

+0

はい、上記の例では、それは '

' – Smit

関連する問題