Bootstrap glyphicon: 100% ширина

В моем webapp у меня есть глификон, содержащийся в div внутри сетки.Bootstrap glyphicon: 100% ширина

Я хочу, чтобы глификон был полной и пропорциональной (чтобы отображаться правильно).

Как я могу это сделать?

Plunker является: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML является:

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red"> 
     <span class="glyphicon glyphicon-star"></span> 
     </div> 
    </div> 
    </div> 
    </body>

CSS является:

.glyphicon { 
    width: 100%; 
    color: green; 
    border: 3px solid green; 
}

С уважением.

источник

2015-07-10 user3181983

glyphicons, как символы ... Вы должны попытаться установить размер шрифта, чтобы установить размер значков ... но пытаюсь поставить его с шириной 100% будет kinda tricky ... – Julo0sS

только «реальный путь» для выполнения задания без использования медиа-запросов и размера шрифта должен был бы использовать ваш глификон в качестве изображения .../img-responsive ... – Julo0sS

вы могли поэкспериментировать с ' font-size: 25vw', изменяя число, чтобы шрифт был одинаковой пропорции ширины видового экрана, поскольку он содержит элемент Мент. Предполагая, что элемент всегда одинаковой пропорции. – Starscream1984

Для этого .., чтобы сделать глификон Star значок отзывчивый.
Вы могли бы сделать это таким образом.
Используйте это, чтобы делать то, что вы хотите достичь здесь.
Не так много, чтобы заполнить ширину, но размер до того, что вам нужно. Надеюсь, это поможет.

.star-size { 
    font-size: 8.5vw; 
    color:orangered; 
}

Но, пожалуйста, прочтите this info.

responsive glyphicon

Если вы хотите, чтобы высота блока сНа быть reponsive со значком звезды, а затем изменить .inner-block класс к этому ...

.inner-block { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black; 
}

И тогда он будет действовать как это.

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>HTML/CSS Block not appearing</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
}  
 
.block { 
 
    height: 240px; 
 
    padding-top: 15px; 
 
    background-color:orangered; 
 
} 
 
.inner-block { 
 
    height: 120px; 
 
    padding-top: 15px; 
 
    background-color:black; 
 
}  
 
    
 
.star-size { 
 
    font-size: 8.5vw; 
 
    color:orangered; 
 
}  
 
.center-div { 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    margin:auto; 
 
     
 
}  
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 

 
    
 
<div class="container col-lg-12 spacer"></div> 
 
     
 
    <div class="container block"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 text-center inner-block center-div" > 
 
     <span class="glyphicon glyphicon-star star-size"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
</body> 
 
</html>

источник

2015-07-11 00:46:40 AngularJR

Глификоны на самом деле являются символами специального шрифта, поэтому они действительно не масштабируются. Если вы действительно хотите это сделать, вы должны создать изображение и растянуть его, например, с помощью width: 100%.

Другой возможный (но противный) решение было бы использовать CSS преобразования, но это хак, не автоматически масштабировать и требует некоторых дополнительных хаков, чтобы правильно расположить:

.glyphicon:before { 
    margin-left: 120px; 
    display:inline-block; 
    transform:scale(17,1); 
    -webkit-transform:scale(17,1); 
    -moz-transform:scale(17,1) 
    -ms-transform:scale(17,1); 
    -o-transform:scale(17,1); 
}

Пример: http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

источник

2015-07-10 12:52:43 DavidG

Bootstrap glyphicon: 100% ширина

ответ

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