2014-05-24 4 views
0

У меня есть строка под кнопкой меню, которую я хочу изменить, потому что, когда вы просматриваете ее на мобильном телефоне, линия выходит дальше, чем меню. на данный момент, даже если я установить размер в 1px он не изменяет на всехНе могу изменить размер изображения

HTML код

<div class="container"> 
<div class="row"> 
<div class = "col-sm-12 col-xs-12" style= "background-color:white"> 
<!--<img src ="/frontimages/orange_tab_wide_up.jpg" style= "display:inline-block"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/blue_tab_wide.jpg"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/green_tab_wide.jpg"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/yellow_tab_wide.jpg">--> 



<a class="btn-test btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test2 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test3 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test4 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a> 

</div> 
</div> 
<div class="row"> 
<div class ="col-xs-7 "> 
<!-- <img class="img-responsive" src="/frontimages/orange_line_wide.png">--> 
<div class="g"> </div> 

</div> 
</div> 
</div> 

CSS

.g { 
    height:3px; 
    margin-top:-3px; 
    background:-moz-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:-webkit-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:linear-gradient(left, #FFFFFF 0%,#EC9B3F 50%,#FFFFFF 100%); 
    width:100%; 
    display:block; 

    } 

    @media (min-width: 300px) and (max-width: 350px) { 
    .g {width:1px;} 
    } 

    @media (max-width:700px) { 
    .g{width: 405px} 
    } 
+0

Можете ли вы предоставить некоторый снимок или Fiddle? –

+0

http://jsfiddle.net/3Vxxb/ предполагается, что под меню будет синяя линия градиента, я не знаю, почему она не появилась. линия проходит мимо меню, и я пытаюсь исправить эту проблему, чтобы она работала корректно на мобильном пейзажном представлении и портретном видении. – user3638530

ответ

0

Почему вы должны установить width:1px? Не должно width:100% работы?

BTW, когда-нибудь, если width:100% все еще вне границ, я попробую width: 99%.

EDIT: change width:100% to max-width:100% будет работать!

+0

Или попробуйте сыграть с http://caniuse.com/css3-boxsizing. – Mario

+0

Я просто играл с размером, пытаясь понять, изменится ли он, и я просто забыл изменить его. – user3638530

+0

Я пробовал установить ширину до 100%, она все еще не работала. линия еще длиннее строки меню. независимо от того, какой размер я регулирую, ширина не изменится вообще. – user3638530

Смежные вопросы