2016-08-17 3 views
2

Я изо всех сил пытаюсь разместить теги div вместе с сеткой Umbraco. Вот как это должно выглядеть следующим образом:контрольные теги div вместе с Umbraco

This is how it should look like

я могу добиться того, что с установкой <br> тегов в коде, но это, конечно, не является хорошей практикой:

<div class="background-image" @Html.Raw(topImageStyling)></div> 
    <div class="max-container"> 
     <div class="fade"></div> 

     <header> 
      <div class="max-container"> 
       <div class="logo-container"> 
        <a href="@homePage.Url"> 
         <!-- <img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="@logoAltText" class="img-responsive logo" /> --> 
        </a> 
       </div> 
      </div> 
     </header> 
    </div> 


    <!-- Content --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       @Umbraco.RenderMacro("Ebook") 
      </div> 
     </div> 
    </div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <div class="row"> 
     <div class="col-md-12> 
      <div class="row"> 
       <div class="col-lg-12"> 
        @CurrentPage.GetGridHtml("Grid") 
       </div> 
      </div> 
     </div> 
    </div> 

Если я удалить <br> теги страница выглядит так:

enter image description here

ли anyb у меня есть идея, как я могу это решить?

+0

Это не имеет ничего общего с Umbraco, это (Bootstrap) это виноват. Возможно, вы можете проверить getbootstrap.com на советы или даже дать этому тегу тег «bootstrap». В противном случае я согласен с Рэнди, вы должны установить минимальную высоту на своем заголовке, чтобы избежать ИЛИ полностью удалить контейнер-жидкость. –

+0

Можете ли вы опубликовать стили CSS или любую разметку из своего макроса EBook? Это похоже на проблему с позиционированием или проблемой переполнения в CSS. Если первое, вам, вероятно, понадобятся изменения 'min-height', но если он будет всплывать, вы можете вообще исправить его с помощью класса clearfix или простого атрибута' overflow: auto; 'CSS в контейнере. – trnelson

ответ

1

Использование большого количества <br> тегов is never хорошая практика.

Вы можете добавить margin или padding через CSS.

В этом случае, похоже, у вас есть форма, которая позиционируется как абсолютная. Из-за этого ваша страница не отслеживает свои размеры в контейнере.

Возможно, вы хотите установить минимальную высоту контейнера в своем CSS.

Например, вы можете добавить ярлык стиля. Пожалуйста, не используйте фактический тег стиль, хотя и редактировать файл CSS:

CSS

.myHeader { 
    min-height:500px; 
} 

HTML

<!-- Content --> 
<div class="container-fluid" class="myHeader"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      @Umbraco.RenderMacro("Ebook") 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12> 
     <div class="row"> 
      <div class="col-lg-12"> 
       @CurrentPage.GetGridHtml("Grid") 
      </div> 
     </div> 
    </div> 
</div>