Yii2: yii\bootstrap\NavBar add property from full-width maket

[mass3ff3ct]

I'm so sorry for my bad english))

Problem:

In last version 'bootstrap' was added class ".container-fluid" for 'full-width' maket, but in class 'yii\bootstrap\NavBar' was no customization 'div' inside 'nav'.

echo Html::beginTag('nav', $this->options);
echo Html::beginTag('div', ['class' => 'container']);  // string 70, problem

i'm propose to do:

echo Html::beginTag('div',$this->innerOptions);

[qiansen1386]

Sorry, i am a bit lost.
which version of bootstrap are we using right now.

2013/12/11 mass3ff3ct [email protected]

I'm so sorry for my bad english))

Problem:

In last version 'bootstrap' was added class ".container-fluid" for
'full-width' maket, but in class 'yii\bootstrap\NavBar' was no
customization 'div' inside 'nav'.

echo Html::beginTag('nav', $this->options);
echo Html::beginTag('div', ['class' => 'container']); // string 70, problem

i'm propose to do:

echo Html::beginTag('div',$this->innerOptions);

—
Reply to this email directly or view it on GitHubhttps://github.com/yiisoft/yii2/issues/1474
.

[mass3ff3ct]

Bootstrap 3.0.3

[qiansen1386]

So that you want to change line 70 form ['class' => 'container'] to ['class' => 'container-fluid']
Have you tried out what will happened if you change it manually by yourself?

[mass3ff3ct]

Yes, but to be able to select or/and add other options as needed

[cebe]

Looking at the bootstrap docs I am wondering why there is a container tag at all...

[mass3ff3ct]

Maybe then .сontainer removed? Save only wrapper "nav")

[kartik-v]

Bootstrap 3.0 does not have anymore container-fluid. Read the migration from 2.0 to 3.0 docs on what has changed.

Now, for styling the Bootstrap 3 navbar:

• for a padded nav within the navbar -- wrap it inside a container class
• for a 100% width do not wrap it inside a container class

Example:

<div class="navbar navbar-inverse">
    <div class="container">   <!-- remove this for 100% width -->
        <div class="navbar-header"> ... </div>
        <div class="navbar-collapse"> ... </div>
    </div>                    <!-- remove this for 100% width -->
</div>

[mass3ff3ct]

commit in bootstrap repository: Add .container-fluid variation for full-width containers and layouts
pruf link

[qiansen1386]

According to my experiment, I didn't put any container arround

element, and it is working perfectly, If i wrap it with container-fluid, there is completely no difference at all. And my Bootstrap version is 3.0.1, a very old version. Did they mention why did they Add container-fluid for nav?

PS: i only tried out the static on top type. not other type.

[mass3ff3ct]

I propose to make the property "$fluid". If it is "true", do not add element inside nav. "false" - add a div with the class ".container"
As cited in the example, the user kartik-v

[frijj2k]

Adding the option:

'renderInnerContainer' => false,

To the NavBar removes the inner container and allows it to fill 100% width. Tested and working.

[brunofunnie]

I think it should be used with "container-fluid", see:

(see button at right with full screen)
https://jsfiddle.net/k5hc5rua/ - Without "container-fluid"
https://jsfiddle.net/t51hjvnb/- With "container-fluid"

So "'renderInnerContainer' => false," just removes a DIV that is needed for correct alignment.

[brunofunnie]

Well, looking at the code, there's an attribute called (innerContainerOptions), so if you do:

'innerContainerOptions' => ['class'=>'container-fluid'],

It should fix it.

[minhluan288]

thank @brunofunny

[shawe]

thanks @brunofunny I was looking for the same ;)