부트스랩] 인터넷창 폭500px이하시 메뉴글자에서 첫글자만 뜨게 하고싶습니다.

조회수 426회

https://cosmosx.kr/

만들고있는 사이트입니다. 창 폭이 500px 이하때 메뉴이름 첫글자만 뜨게 하고싶은데요.

bootstrap.min.css 여기서 수정하면될까요? 그런것 같아서보니 .... 이렇게 줄바꿈없이 따닥따닥따닥따닥 붙어있어서 .... 알수가 없네요.

이미지

아니면 .custom_bootstrap_menubar.js 이거 같아서요. 맞나요? 이러하면 .. 자바스크립트를 해야되는거죠?

$(document).ready(function () {

$('.navbar .dropdown-item').on('click', function (e) {
    var $el = $(this).children('.dropdown-toggle');
    var $parent = $el.offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

    if (!$parent.parent().hasClass('navbar-nav')) {
        if ($parent.hasClass('show')) {
            $parent.removeClass('show');
            $el.next().removeClass('show');
            $el.next().css({"top": -999, "left": -999});
        } else {
            $parent.parent().find('.show').removeClass('show');
            $parent.addClass('show');
            $el.next().addClass('show');
            $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
        }
        e.preventDefault();
        e.stopPropagation();
    }
});

$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
    $(this).find('li.dropdown').removeClass('show open');
    $(this).find('ul.dropdown-menu').removeClass('show open');
});

});

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

    1. 말씀하신 "따닥따닥따닥 붙어 있"는 걸 "minified(최소화)"돼 있다고 부릅니다. 그리고 CSS든 JS든 뭐든 minified 돼있는 소스를 절대로 수정하지 마세요. 그짓거리 몇번 해봤다가 피본 입장에서 알려드리는 꿀팁 입니다.
      보통은 그 소스들은 그대로 두고, 그 소스들이 하는 행동을 오버라이딩(overriding, 다른 행동으로 갈음하기)합니다.
    2. 하고자 하시는 작업은 말하자면 모바일 최적화라는 것일 텐데요, 보통 모바일에서 "텍스트가 기니까 줄여서 보여주자"라는 건 별로 좋은 아이디어가 아닙니다.
      일반적으로, 웹에서는, 텍스트는 죄가 없습니다. 화면이 좁아서 뭔가 문제가 생기면, 보통은 이미지를 너비에 맞춰 줄이고, 표를 스크롤되게 만들고, 필수적이지 않은 요소를 통째로 가려서, 그렇게 확보한 공간과 공간감을 가지고 텍스트를 최대한 보여주려고 하는 게 관례입니다.

    잡설이 길었군요. 원하시는 것은 부트스트랩4 에서는 디스플레이 유틸리티 클래스에 해당합니다. 아마 이렇게 쓰시면 원하시는 것을 달성할 수 있을 것입니다.

    <a href="#">가<span class="d-none d-sm-block">격표</span></a>
    
    • 실제로 해보니 말씀하신대로 좋은 방법은 아닌거 같네요 ㅎㅎ 그냥 모바일 메뉴바로 넘어가게 하는게 더 깔끔할것 같네요. 답변감사합니다.^^ 알 수 없는 사용자 2020.6.14 16:12

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)