-1

Bootply (http://bootply.com/98907)

with the chrome/mobile view (small width view), Height of "Auth" checkbox changed to high.

height of Auth checkbox must be same.

<form name="fhead" class="form-inline" role="form" onsubmit="return fhead_submit(this);" method="post" autocomplete="off">
<div id="outlogin_box" name="outlogin_box">
<input name="url" type="hidden" value="%2F">
<input name="mb_id" class="form-control" type="text" maxlength="20" placeholder="login id" itemname="아이디">
<div class="input-group">
    <input name="mb_password" class="form-control" id="outlogin_mb_password" type="password" maxlength="20" placeholder="password" itemname="password">
    <span class="input-group-addon">
        <div class="checkbox">
        <label>
        <input name="auto_login" title="Remember me" onclick="if (this.checked) { if (confirm('Using Auth?')) { this.checked = true; } else { this.checked = false; } }" type="checkbox" value="1">
        Auth
        </label>
        </div>
    </span>
</div>
<button class="btn btn-default btn-group-justified" type="submit">Login</button>
<div class="input-group">
    <div class="btn-group btn-group-justified">
        <a title="회원가입" class="btn btn-default" href="./bbs/register.php">회원가입</a>
        <a title="회원 id, password 찾기" class="btn btn-default" href="javascript:win_password_lost();">아이디찾기</a>
    </div>
</div>
</div>
</form>
kjhughes
  • 106,133
  • 27
  • 181
  • 240
OpenCode
  • 315
  • 7
  • 19
  • Questions asking for code must **demonstrate a minimal understanding of the problem being solved**. Include attempted solutions, why they didn't work, and the *expected* results. See also: [Stack Overflow question checklist](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist) – Danny Beckett Dec 09 '13 at 07:23

1 Answers1

2

I have inspected your code and it's set media query:

@media (min-width: 768px){ .form-inline .radio, .form-inline .checkbox { display: inline-block; padding-left: 0; margin-top: 0; margin-bottom: 0; } }

so when width is lower than 768px it changes css, it removes that media query and it gives margines to that element like this: 

.radio, .checkbox { display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px; vertical-align: middle; }

So you should change that media query width, or make new media query. i hope i helped, and that i correctly understood your question

leni2312
  • 81
  • 3
  • leni2312// thanks. I just use bootstrap 3.0.3 not my own media query. It may be a bootstrap's bug? – OpenCode Dec 06 '13 at 12:41
  • can't say much about it, haven't been working with it lately, it could be cause it was just released. anyway you can override bootstrap css with your own custom css (don't change original css), it's well explained on this question: http://stackoverflow.com/questions/8596794/customizing-bootstrap-css-template – leni2312 Dec 06 '13 at 12:52
  • "Do not modify the bootstrap.css file" ... so I do not want to modify media query. I will report this to bootstrap team. – OpenCode Dec 06 '13 at 12:57
  • you can overwrite it with your own media query in your custom css that you include, just add your class to that checkbox and write it's own css – leni2312 Dec 06 '13 at 13:00
  • I am i php and jquery programmer, so I do not know media query. I can not make my own css using media query. – OpenCode Dec 06 '13 at 13:06
  • add to your div with class checkbox another class, something like this:
    and make new css file where you will put your custom css, include it in your html, and this is media query you need: @media (max-width: 768px){ .form-inline .radio, .form-inline .checkbox.custom { margin-top: 0; margin-bottom: 0; } } here is fiddle: http://bootply.com/98923
     – leni2312 Dec 06 '13 at 13:12