Livrar-se de todos os cantos arredondados no Twitter Bootstrap


172

Adoro o Twitter Bootstrap 2.0 - adoro como é uma biblioteca completa ... mas quero fazer uma modificação global em um site muito quadrado, que é para livrar-se de todos os cantos arredondados do Bootstrap ...

Isso é muito CSS para ser analisado. Existe uma opção global ou qual seria a melhor maneira de encontrar e substituir todas as opções arredondadas?


Você deseja remover todos ou apenas alguns cantos arredondados?
Andrés Ilich

Se você não pode modificar o que você tem atualmente no lugar, eu criei um arquivo mod que tem tudo pronto border-raios para 0: mkamyszek.tumblr.com/post/61791361233/...
Mark Kamyszek

1
ina, minha resposta funcionou para você? você o marcaria como correto?
BrunoS 15/02

sim. obrigado! .. por que o voto negativo embora
ina

Respostas:


330

Defino o raio da borda de todos os elementos como "0" assim:

* {
  border-radius: 0 !important;
}

Como tenho certeza de que não quero substituir isso mais tarde, apenas uso! Important.

Se você não estiver compilando menos arquivos, faça:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

No bootstrap 3, se você estiver compilando, agora você pode definir o raio no arquivo variables.less:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

No bootstrap 4, se você estiver compilando, é possível desativar o raio no _custom.scssarquivo:

$enable-rounded:   false;

2
Esta é uma solução muito boa se você estiver tentando personalizar a inicialização sem tocar nos arquivos principais. Ótima resposta!
marty

4
Parreira sim, rápido e sujo!
Programador

1
Eu tinha usado isso * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }e está funcionando perfeitamente para o Bootstrap 3.2. Thanx para o homem da correção!
Todor Todorov

1
Esta solução não funciona para entradas <select> com estilo de inicialização. Provavelmente devido ao uso de -webkit-appearance: menulist.
31415 Johnsorrentino

Esta é provavelmente uma boa solução, mas não a melhor. Isso irá gerar um grande número de CSS redundante para cada elemento desnecessariamente. Penso que esta é uma das melhores soluções fornecidas pelo @ymakux. Você pode tentar isso
MB Parvez Rony

25

Faça o download dos .lessarquivos de origem e deixe o .border-radius()mixin em branco.


Esta é talvez a melhor solução em termos de eficiência com o domínio do processamento CSS do Bootstrap.
klewis

20

Se você estiver usando o Bootstrap versão <3 ...

Com sass / scss

$baseBorderRadius: 0;

Com menos

@baseBorderRadius: 0;

Você precisará definir essa variável antes de importar o bootstrap. Isso afetará todos os poços e barras de navegação.

Atualizar

Se você estiver usando o Bootstrap 3 baseBorderRadius deve ser border-radius-base


18

Se você quiser evitar recompilar tudo, basta adicionar .btn {border-radius: 0;}ao seu CSS.


1
Ele terá impacto apenas em botões e onde quer que você adicionou.btn
zVictor

18
code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

7

Esta questão é bastante antiga, porém é altamente visível nos mecanismos de pesquisa, mesmo nas pesquisas relacionadas ao Bootstrap 4 . Eu acho que vale a pena adicionar uma resposta para desativar os cantos arredondados, forma BS4.

No _variables.scssexistem vários modificadores globais existe para alterar rapidamente o material tal como activando ou desactivando sistema cingidos de flex, cantos arredondados, gradientes etc.:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

Os cantos arredondados são enabledpor padrão.

Se você preferir compilar o Bootstrap 4 usando o Sass e o seu próprio _custom.scsscomo eu (ou usando o personalizador oficial), substituir a variável relacionada é suficiente:

$enable-rounded : false

1
you rock;) Essa deve ser a resposta aceita assim que o Bootstrap 4 se tornar viral ... desculpe, público. Está bem escondido aqui para aqueles que já o usam em alfa.
kub1x

5
.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

Ou defina um mixin e inclua-o onde quiser um botão não arredondado.

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

4
pxé redundante, não?
ta.speot.is

1
Normalmente mantenho 'px' para que, se for necessário alterar o valor, não seja necessário digitar 'px' novamente.
Nkkollaw 11/11

1
mas o extra de bytes de dados
Anthony Shaw

5

Ao usar o Bootstrap> = 3.0arquivos de origem ( SASSou LESS), você não precisa se livrar dos cantos arredondados em tudo, se houver apenas um elemento que o incomoda, por exemplo, para se livrar dos cantos arredondados na barra de navegação, usar:

Com o SCSS:

$navbar-border-radius: 0;

Com menos:

@navbar-border-radius: 0;

No entanto, se você quiser se livrar dos cantos arredondados de tudo, faça o que o @ adamwong246 mencionou e use:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Essas duas configurações são as configurações "raiz" das quais as outras configurações navbar-border-radiusserão herdadas, a menos que outros valores sejam especificados.

Para obter uma lista de todas as variáveis, consulte o variables.less ou o variáveis.scss


4

O código postado acima por @BrunoS não funcionou para mim,

* {
  .border-radius(0) !important;
}

o que eu usei foi

* {
  border-radius: 0 !important;
}

Espero que isso ajude alguém


3
@brunos estava usandoLESS
afaolek


2

Ou você pode adicionar isso ao html do elemento do qual deseja remover o raio da borda (desta forma, não o removeria de todos os botões / elementos):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

2

Com o SASS Bootstrap - se você estiver compilando o Bootstrap - você pode definir todo o raio da borda (ou mais específico) simplesmente para zero:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Exatamente. Coloque essas declarações antes, por exemplo, @import "../node_modules/bootstrap/scss/bootstrap";e o bootstrap não as substituirá, pois elas são declaradas com a !defaultpalavra-chave em bootstrap-source.
Jeppe

2

O Bootstrap possui suas próprias classes para bordas, incluindo .rounded-0a remoção de cantos arredondados em qualquer elemento, incluindobuttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>


1

Você também pode dar uma olhada no FlatStrap . Ele fornece uma substituição no estilo Metro para o CSS do Bootstrap sem cantos arredondados, gradientes e sombras projetadas.


O problema com o Flatstrap é que eles ainda não têm suporte SCSS para a v3 :(
HP.

1

se você estiver usando o bootstrap, basta usar a classe bootstrap = "rounded-0" para fazer a borda com as bordas afiadas sem cantos arredondados <button class="btn btn-info rounded-0"">Generate</button></span>


qual versão do bootstrap
ina

0

Criei outro arquivo css e adicionei o seguinte código Nem todos os elementos estão incluídos

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.