Bootstrap Navbar - ulanishdan oldin va keyin <hr> qo'shing

Menda bootstrap navbar bor. Agar ochilgan oyna kengaytirilsa, ro'yxatning pastki qismida va oxirgi elementni chiziqli satr satrini qo'shishni xohlayman.

Men Bootift ni yaratdim va nima qilmoqchi ekanimni ko'rsatish uchun rasmni biriktirdim.

enter image description here

Mana mening jQuery.

$('.dropdown.open .dropdown-toggle').append('

');
1
ochilgan va so'nggi bolani yomon qiyshaytirdi ...
qo'shib qo'ydi muallif user1673498, manba
ochilgan va so'nggi bolani yomon qiyshaytirdi ...
qo'shib qo'ydi muallif user1673498, manba
Siz faqat elementini ishlata olmaysizmi?
qo'shib qo'ydi muallif DavidDomain, manba
Siz faqat elementini ishlata olmaysizmi?
qo'shib qo'ydi muallif DavidDomain, manba
Siz faqat elementini ishlata olmaysizmi?
qo'shib qo'ydi muallif DavidDomain, manba
Men ochiladigan birinchi va pastki tugmachaning ostidagi chiziqni uzatish liniyasini qo'shmoqchiman. Bu mantiqiy emas, sizning suratingizni ochqichning oxirgi bolasiga va ochiladigan ulanishni o'zi.
qo'shib qo'ydi muallif Ionut, manba
Men ochiladigan birinchi va pastki tugmachaning ostidagi chiziqni uzatish liniyasini qo'shmoqchiman. Bu mantiqiy emas, sizning suratingizni ochqichning oxirgi bolasiga va ochiladigan ulanishni o'zi.
qo'shib qo'ydi muallif Ionut, manba

8 javoblar

Sizning soatingizni div-ga joylashtirishingiz kerak.

Kodni o'zgartirishni sinab ko'rdim - Pastdagi ochqichlarni sinab ko'ring

Misol

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 $(document).ready(function($) {   

$('.hr_line').append('

');
  
  });
 .break-sec-w {
    width: 40px;
    
    border-top: 1px solid red;
    margin-top: 10px !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
     
       </head>
       <body>
       
       <div class="container">

      <!-- Static navbar -->
      
 



    </div> <!-- /container -->
</body>
</html>
</div> </div>

1
qo'shib qo'ydi
U yordam berganidan xursandmiz!
qo'shib qo'ydi muallif neophyte, manba

Siz buni ko'p jihatdan qila olasiz, lekin buning uchun hrni ishlatmaslik kerakligiga aminman. Chegara orqali amalga oshirilgan chizilgan effekt yoki tanlovchilar ishni qilgandan so'ng :)

Chegaralangan misollar:

  1. Class for the element that needs to be separated from the rest and then CSS for that like

    .classname{ border-bottom: 1px solid #colorHex; }

  2. Select certain elements that needs to get the underline effect:

    .nav>li:nth-child(2), .nav>li:nth-child(7){ border-bottom: 1px solid #colorHex; }

Keyinchalik selektor bilan namuna:

.className{
   position: relative;
}
.className:after{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #yourHex
}

Umid qilamanki :)

0
qo'shib qo'ydi

Quyidagi kabi ba'zi bir qo'shimcha uslublar kerak bo'lsa, CSS-ni bekor qilishingiz mumkin:

.navbar-nav .open ul.dropdown-menu{ 
     border-radius:0px; 
     border:solid 1px red; 
     border-width:1px 0;
}

Bootti yangilangan .

0
qo'shib qo'ydi
Bu yaxshi va sodda, ammo chiziq to'liq kenglikda bo'lib, uni kichikroq qilish imkoniyatiga ega bo'lishim kerak.
qo'shib qo'ydi muallif user1673498, manba

Bu erda yechim ishlatiladi: pseudo-elementdan so'ng:

Hech qanday javascript

.navbar-nav .open .dropdown-toggle:after {
    content: ' ';
    width: 10%;
    height: 1px;
    background-color: red;
    display: block;
    margin: 5px auto;
}

here is bootply

0
qo'shib qo'ydi

Kodni asoslab, cheklovdan foydalangan holda:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* CSS used here will be applied after bootstrap.css */

hr.break-sec-w {
  width: 40px;
  /* color: #fff !important; */
  border-top: 1px solid #fff;
  margin-top: 10px !important;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #555;
  background-color: transparent;
}

.navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-align: center;
}

.navbar-nav {
  margin: 7.5px -15px;
  text-align: center !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  color: #555;
  background-color: transparent;
}

#navbar a{
  display: inline-block;
}

.dropdown>a {
  border-bottom: 1px solid #f00;
  display: block;
}

.dropdown li:last-child a{
  border-bottom: 1px solid #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <!-- Static navbar -->
  
 



</div>
<!-- /container -->
</div> </div>

0
qo'shib qo'ydi
Mm, bu barcha tomoshabinlar va uning to'liq kengligi bo'ylab chiziqga ega, men chiziqning kengligini belgilashim kerak.
qo'shib qo'ydi muallif user1673498, manba
Anchorlarda display: inline-block dan foydalaning. Ko'rish uchun yangilayman.
qo'shib qo'ydi muallif Ionut, manba

Siz CSS uslubini sinab ko'rishingiz mumkin. n-bola

.nav> li:nth-child(2),
.nav> li:nth-child(7) {
    content: "

"   

}

Siz misolda ishlatgan saboqlarni o'zgartirishingiz kerak bo'ladi.

0
qo'shib qo'ydi
Qizig'i shundaki, bu kabi narsalarni sinab ko'rdim, lekin hech qanday imkoniyatga ega bo'lmadim, qanday qilib HRni shu kabi sinfga qo'shishim mumkin?
qo'shib qo'ydi muallif user1673498, manba
chegara bilan bog'liq muammo shundan iboratki, bu ulanishning to'liq kengligi va haqiqatan mening misolim noto'g'ri, chiziq juda kichik bo'lishi kerak. yomon yangilash
qo'shib qo'ydi muallif user1673498, manba
: first-child /: last-child - bu yaxshi tanlovdir.
qo'shib qo'ydi muallif Jai, manba
Shubhasiz, u ishlaydi
qo'shib qo'ydi muallif Banzay, manba
@ user1673498, nima uchun border ishlatishingiz mumkin bo'lsa, nima uchun
kerak?
qo'shib qo'ydi muallif Ionut, manba
Ha, chegara qadar oson bo'ladi.
qo'shib qo'ydi muallif Toxide82, manba

Siz CSS uslubini sinab ko'rishingiz mumkin. n-bola

.nav> li:nth-child(2),
.nav> li:nth-child(7) {
    content: "

"   

}

Siz misolda ishlatgan saboqlarni o'zgartirishingiz kerak bo'ladi.

0
qo'shib qo'ydi
chegara bilan bog'liq muammo shundan iboratki, bu ulanishning to'liq kengligi va haqiqatan mening misolim noto'g'ri, chiziq juda kichik bo'lishi kerak. yomon yangilash
qo'shib qo'ydi muallif user1673498, manba
Qizig'i shundaki, bu kabi narsalarni sinab ko'rdim, lekin hech qanday imkoniyatga ega bo'lmadim, qanday qilib HRni shu kabi sinfga qo'shishim mumkin?
qo'shib qo'ydi muallif user1673498, manba
: first-child /: last-child - bu yaxshi tanlovdir.
qo'shib qo'ydi muallif Jai, manba
Shubhasiz, u ishlaydi
qo'shib qo'ydi muallif Banzay, manba
@ user1673498, nima uchun border ishlatishingiz mumkin bo'lsa, nima uchun
kerak?
qo'shib qo'ydi muallif Ionut, manba
Ha, chegara qadar oson bo'ladi.
qo'shib qo'ydi muallif Toxide82, manba

Siz CSS uslubini sinab ko'rishingiz mumkin. n-bola

.nav> li:nth-child(2),
.nav> li:nth-child(7) {
    content: "

"   

}

Siz misolda ishlatgan saboqlarni o'zgartirishingiz kerak bo'ladi.

0
qo'shib qo'ydi
Qizig'i shundaki, bu kabi narsalarni sinab ko'rdim, lekin hech qanday imkoniyatga ega bo'lmadim, qanday qilib HRni shu kabi sinfga qo'shishim mumkin?
qo'shib qo'ydi muallif user1673498, manba
chegara bilan bog'liq muammo shundan iboratki, bu ulanishning to'liq kengligi va haqiqatan mening misolim noto'g'ri, chiziq juda kichik bo'lishi kerak. yomon yangilash
qo'shib qo'ydi muallif user1673498, manba
: first-child /: last-child - bu yaxshi tanlovdir.
qo'shib qo'ydi muallif Jai, manba
Shubhasiz, u ishlaydi
qo'shib qo'ydi muallif Banzay, manba
@ user1673498, nima uchun border ishlatishingiz mumkin bo'lsa, nima uchun
kerak?
qo'shib qo'ydi muallif Ionut, manba
Ha, chegara qadar oson bo'ladi.
qo'shib qo'ydi muallif Toxide82, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb