2016-08-18 78 views
0

本頁內容:(我只設置一個紅色和綠色的邊框,以使其更清晰)建議如何使電網橫幅

我有一本書,需要在左側的圖片其中黑色邊框是:

我試圖用下面的代碼構建橫幅。但我無法弄清楚如何設置適合黑色邊框的左側的div標籤。

有沒有人有關於如何做到這一點的建議?該代碼有到現在爲止是這樣的:

<div class="top-area" style="border: 4px solid red;"> 
    <div class="container" style="border: 4px solid green;"> 

     @if (!string.IsNullOrEmpty(headerText)) 
     { 
      if (pageAlias == "Blog") 
      { 
       <h1 class="header-xl center"> 
        @Html.Raw(headerText) 
       </h1> 
      } 
      else 
      { 
       <p class="header-xl center"> 
        @Html.Raw(headerText) 
       </p> 
      } 
     } 
     @if (CurrentPage.HasValue("imageTeaserText")) 
     { 
      <p class="sub-header center"> 
       @Html.Raw(CurrentPage.imageTeaserText) 
      </p> 
     } 


    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-12 main-content" id="main-content"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          @CurrentPage.GetGridHtml("inovoGrid") 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
+1

你是什麼意思「我的div標籤在四處跳躍」。這本書的圖片應該是大圖片嗎? –

+0

也許這有點不清楚我想要什麼,我很抱歉。我明天只有一個截止日期,今天沒有任何工作可以爲我工作。我試過更新我的問題,我希望現在更清楚我的意思? – KrMa

回答

1

Here's an example on plunkr使用引導柱保持對你的標題兩側排列元素。 Bootstrap基於12列對齊其網格。我只通過col-sm-x添加了對小密度屏幕的支持,您應該嘗試其他密度。

+0

謝謝你的回答。我會玩這個。你會如何在這裏的小設備上看到黃色的左側內容? https://plnkr.co/edit/BBZGhsy0kAaK2k0Bmxa9我能否以某種方式拖拉? – KrMa