Поўная шырыня Centered Navigation Top Bar - Zurb Foundation

I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns

enter image description here

Я паспрабаваў наступныя (але гэта не працуе)

<div class="row">
  <div class="large-12 columns">
      
  </div>
</div>

Update:

Я стварыў jsFiddle на аснове Фонд Прыклад   Калі памер акна браўзэра, вялікі, рух шырыня змены. Але я хачу, каб гэта было Цэнтраваць фіксаваным ў якасці асноўнага зместу.

18
Я дадаў jsFiddle
дададзена аўтар dpaluy, крыніца
Я дадаў jsFiddle
дададзена аўтар dpaluy, крыніца
Я дадаў jsFiddle
дададзена аўтар dpaluy, крыніца
калі ласка, стварыць скрыпку, каб зрабіць яго простым для разумець
дададзена аўтар The Mechanic, крыніца
калі ласка, стварыць скрыпку, каб зрабіць яго простым для разумець
дададзена аўтар The Mechanic, крыніца

8 адказы

As the Foundation 4 docs saying : http://foundation.zurb.com/docs/components/top-bar.html

Калі вы хочаце, каб ваш навігацыі павінен быць усталяваны ў вашай шырыні сеткі, абгарнуць яго ў   <�Моцны> клас дзялення = "ўтрымліваюць да сеткі" .

Так паспрабуйце наступнае:

<div class="contain-to-grid">
    <!-- Your nav bar -->
    
</div>

Спадзяюся, што гэта дапамагае!

36
дададзена
Гэта працуе, і што старонка дакумента Фонду павінна ўтрымліваць гэтую інфармацыю, ІМХО.
дададзена аўтар Edwin Yip, крыніца
ўтрымліваюць да сеткі з'яўляецца правільным рашэннем. Дзякуй!
дададзена аўтар dpaluy, крыніца

As the Foundation 4 docs saying : http://foundation.zurb.com/docs/components/top-bar.html

Калі вы хочаце, каб ваш навігацыі павінен быць усталяваны ў вашай шырыні сеткі, абгарнуць яго ў   <�Моцны> клас дзялення = "ўтрымліваюць да сеткі" .

Так паспрабуйце наступнае:

<div class="contain-to-grid">
    <!-- Your nav bar -->
    
</div>

Спадзяюся, што гэта дапамагае!

36
дададзена
Гэта працуе, і што старонка дакумента Фонду павінна ўтрымліваць гэтую інфармацыю, ІМХО.
дададзена аўтар Edwin Yip, крыніца
ўтрымліваюць да сеткі з'яўляецца правільным рашэннем. Дзякуй!
дададзена аўтар dpaluy, крыніца

Калі я правільна разумею, што вы хочаце, вам проста трэба абгарнуць <�моцны> nav.top-бар <�моцны /> элемент у <�моцны> DIV з класам <�моцны> ўтрымліваюць да сеткі </моцны >.

<div class="row">
  <div class="contain-to-grid">
    
  </div>
</div>
7
дададзена
Гэта працуе для мяне. Падобна на тое, менавіта тое, што я спрабаваў зрабіць зрабіць, каб атрымаць бар працуе, але я couln't, пакуль я не скапіяваць і ўставіць гэты код. Гэта спрацавала.
дададзена аўтар FernandoZ, крыніца

The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.

You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html

Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?

EDIT

If i understand it rights, it pretty simple to do with CSS :

.top-bar {
    max-width: 900px;
    margin:auto;
}
1
дададзена
Я стварыў jsFiddle. см абнаўлення
дададзена аўтар dpaluy, крыніца

The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.

You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html

Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?

EDIT

If i understand it rights, it pretty simple to do with CSS :

.top-bar {
    max-width: 900px;
    margin:auto;
}
1
дададзена
Я стварыў jsFiddle. см абнаўлення
дададзена аўтар dpaluy, крыніца

The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.

You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html

Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?

EDIT

If i understand it rights, it pretty simple to do with CSS :

.top-bar {
    max-width: 900px;
    margin:auto;
}
1
дададзена
Я стварыў jsFiddle. см абнаўлення
дададзена аўтар dpaluy, крыніца
<div class="contain-to-grid">
 
0
дададзена
паспрабаваць гэта, яна працуе !!
дададзена аўтар user1808292, крыніца
<div class="contain-to-grid">
 
0
дададзена
паспрабаваць гэта, яна працуе !!
дададзена аўтар user1808292, крыніца