Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

yii\bootstrap\NavBar add property from full-width maket #1474

Closed
mass3ff3ct opened this issue Dec 11, 2013 · 15 comments
Closed

yii\bootstrap\NavBar add property from full-width maket #1474

mass3ff3ct opened this issue Dec 11, 2013 · 15 comments
Assignees
Milestone

Comments

@mass3ff3ct
Copy link

@mass3ff3ct mass3ff3ct commented Dec 11, 2013

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
Copy link
Contributor

@qiansen1386 qiansen1386 commented Dec 11, 2013

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

2013/12/11 mass3ff3ct notifications@github.com

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//issues/1474
.

@mass3ff3ct
Copy link
Author

@mass3ff3ct mass3ff3ct commented Dec 11, 2013

Bootstrap 3.0.3

@qiansen1386
Copy link
Contributor

@qiansen1386 qiansen1386 commented Dec 11, 2013

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
Copy link
Author

@mass3ff3ct mass3ff3ct commented Dec 11, 2013

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

@cebe
Copy link
Member

@cebe cebe commented Dec 11, 2013

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

@mass3ff3ct
Copy link
Author

@mass3ff3ct mass3ff3ct commented Dec 11, 2013

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

@kartik-v
Copy link
Contributor

@kartik-v kartik-v commented Dec 11, 2013

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
Copy link
Author

@mass3ff3ct mass3ff3ct commented Dec 11, 2013

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

@qiansen1386
Copy link
Contributor

@qiansen1386 qiansen1386 commented Dec 12, 2013

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
Copy link
Author

@mass3ff3ct mass3ff3ct commented Dec 12, 2013

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

@cebe cebe closed this in b7e5ed3 Dec 17, 2013
cebe added a commit that referenced this issue Dec 17, 2013
@ghost ghost assigned cebe Dec 17, 2013
@frijj2k
Copy link

@frijj2k frijj2k commented Jul 9, 2014

Adding the option:

'renderInnerContainer' => false,

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

@brunofunnie
Copy link

@brunofunnie brunofunnie commented Sep 26, 2015

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
Copy link

@brunofunnie brunofunnie commented Sep 26, 2015

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

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

It should fix it.

@minhluan288
Copy link

@minhluan288 minhluan288 commented Mar 19, 2016

thank @brunofunny

@shawe
Copy link

@shawe shawe commented Dec 12, 2016

thanks @brunofunny I was looking for the same ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.