My container-fluid Width drecreasing at xs devices on responsible mode
0
Example
OBS: I'm using ReactJS, the reason of 'className' instead 'class'
bootstrap 4.1
have a problem that I can not resolve it. From the sm breakpoint my container starts to decrease in width and does not complete 100% on xs devices, for example iphone5s or in responsive mode. I'm already using col-12. Thanks!
<div className='container-fluid'>
<div className='row'>
<div className='col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 bg-primary d-flex align-items-center justify-content-center'>
<div><h2 className='nav nav-brand text-white'>LOGO</h2></div>
<nav className='nav navbar d-flex align-items-center justify-content-center'>
<div className='position-relative d-block d-sm-none d-none d-sm-block d-md-none'>
<ul className='nav'>
<li className='nav-item'><a href='#' className='nav-link'><img className='img-fluid' src=imgUiHaveNotifications style=width: '1em' /></a></li>
<a href='#'><span className='badge badge-pill badge-danger position-absolute mt-3 shadow mb-5 rounded-circle' style=top: -5, right: 78>5</span></a>
<li className='nav-item '><a href='#' className='nav-link'><img className='rounded-circle' src=imgAvatar style=width: '1.5em' /><img src=imgMoreIcon style=width: 20 /></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
twitter-bootstrap bootstrap-4 react-bootstrap
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
add a comment |
0
Example
OBS: I'm using ReactJS, the reason of 'className' instead 'class'
bootstrap 4.1
have a problem that I can not resolve it. From the sm breakpoint my container starts to decrease in width and does not complete 100% on xs devices, for example iphone5s or in responsive mode. I'm already using col-12. Thanks!
<div className='container-fluid'>
<div className='row'>
<div className='col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 bg-primary d-flex align-items-center justify-content-center'>
<div><h2 className='nav nav-brand text-white'>LOGO</h2></div>
<nav className='nav navbar d-flex align-items-center justify-content-center'>
<div className='position-relative d-block d-sm-none d-none d-sm-block d-md-none'>
<ul className='nav'>
<li className='nav-item'><a href='#' className='nav-link'><img className='img-fluid' src=imgUiHaveNotifications style=width: '1em' /></a></li>
<a href='#'><span className='badge badge-pill badge-danger position-absolute mt-3 shadow mb-5 rounded-circle' style=top: -5, right: 78>5</span></a>
<li className='nav-item '><a href='#' className='nav-link'><img className='rounded-circle' src=imgAvatar style=width: '1.5em' /><img src=imgMoreIcon style=width: 20 /></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
twitter-bootstrap bootstrap-4 react-bootstrap
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19
add a comment |
0
0
0
Example
OBS: I'm using ReactJS, the reason of 'className' instead 'class'
bootstrap 4.1
have a problem that I can not resolve it. From the sm breakpoint my container starts to decrease in width and does not complete 100% on xs devices, for example iphone5s or in responsive mode. I'm already using col-12. Thanks!
<div className='container-fluid'>
<div className='row'>
<div className='col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 bg-primary d-flex align-items-center justify-content-center'>
<div><h2 className='nav nav-brand text-white'>LOGO</h2></div>
<nav className='nav navbar d-flex align-items-center justify-content-center'>
<div className='position-relative d-block d-sm-none d-none d-sm-block d-md-none'>
<ul className='nav'>
<li className='nav-item'><a href='#' className='nav-link'><img className='img-fluid' src=imgUiHaveNotifications style=width: '1em' /></a></li>
<a href='#'><span className='badge badge-pill badge-danger position-absolute mt-3 shadow mb-5 rounded-circle' style=top: -5, right: 78>5</span></a>
<li className='nav-item '><a href='#' className='nav-link'><img className='rounded-circle' src=imgAvatar style=width: '1.5em' /><img src=imgMoreIcon style=width: 20 /></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
twitter-bootstrap bootstrap-4 react-bootstrap
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
Example
OBS: I'm using ReactJS, the reason of 'className' instead 'class'
bootstrap 4.1
have a problem that I can not resolve it. From the sm breakpoint my container starts to decrease in width and does not complete 100% on xs devices, for example iphone5s or in responsive mode. I'm already using col-12. Thanks!
<div className='container-fluid'>
<div className='row'>
<div className='col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 bg-primary d-flex align-items-center justify-content-center'>
<div><h2 className='nav nav-brand text-white'>LOGO</h2></div>
<nav className='nav navbar d-flex align-items-center justify-content-center'>
<div className='position-relative d-block d-sm-none d-none d-sm-block d-md-none'>
<ul className='nav'>
<li className='nav-item'><a href='#' className='nav-link'><img className='img-fluid' src=imgUiHaveNotifications style=width: '1em' /></a></li>
<a href='#'><span className='badge badge-pill badge-danger position-absolute mt-3 shadow mb-5 rounded-circle' style=top: -5, right: 78>5</span></a>
<li className='nav-item '><a href='#' className='nav-link'><img className='rounded-circle' src=imgAvatar style=width: '1.5em' /><img src=imgMoreIcon style=width: 20 /></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
twitter-bootstrap bootstrap-4 react-bootstrap
twitter-bootstrap bootstrap-4 react-bootstrap
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
edited Nov 15 '18 at 13:45
Eduardo Carvalho Vieira
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
asked Nov 15 '18 at 12:14
Eduardo Carvalho VieiraEduardo Carvalho Vieira
12
12
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19
add a comment |
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319296%2fmy-container-fluid-width-drecreasing-at-xs-devices-on-responsible-mode%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319296%2fmy-container-fluid-width-drecreasing-at-xs-devices-on-responsible-mode%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please post the code that reproduces the issue
– Zim
Nov 15 '18 at 12:16
@Zim Updated my question with the code. Thank you!
– Eduardo Carvalho Vieira
Nov 15 '18 at 12:24
This may not be the issue, but just an observation that 'className' should be changed to 'class'
– paddyfields
Nov 15 '18 at 13:03
@paddyfields I'm using ReactJS which uses JSX syntax
– Eduardo Carvalho Vieira
Nov 15 '18 at 13:44
I partially solved the problem by changing all units of measures of my items to 'em'. Some units were in Pixels, helping to break the layout.
– Eduardo Carvalho Vieira
Nov 15 '18 at 18:19