বুটস্ট্র্যাপ nav.০ নববারের উচ্চতা হ্রাস করা

Question

আমি বুটস্ট্র্যাপ 3.0.০ নাবারের উচ্চতা হ্রাস করার চেষ্টা করছি যা স্থির শীর্ষের আচরণের সাথে ব্যবহৃত হয়। এখানে আমি কোড ব্যবহার করছি।

এইচটিএমএল

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

সিএসএস

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

ফলাফল

স্ক্রীন থেকে এটি দেখায়, নাভি বার আউটপুট হ্রাস পেয়েছে তবে উচ্চতা হ্রাস পায় না। মূল উচ্চতা গোলাপী বর্ণে প্রদর্শিত হয়।

উপরের সিএসপি স্ক্রিপ্ট বুটস্ট্র্যাপ ২-এ প্রায় ভাল কাজ করে *

উচ্চতা হ্রাস করার কোনও উপায় কি সঠিকভাবে আছে?

Comments

বুটস্ট্র্যাপ 3

— বারটেক এস

নাবার-ইনার আমার কাস্টম ক্লাস। বুটস্ট্র্যাপ 3.0 এর সাথে সম্পর্কিত নয়।

— irfanmcsd

আমার পক্ষে কাজ করার একমাত্র উপায়টি এই লিঙ্কটিতে ব্যাখ্যা করা হয়েছে: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / ১৯৫719757561/২ এটি মাত্র দুটি লাইনের কোডের সাথে নাবারের উচ্চতা হ্রাস করে

— জিওভানিম

Answer 1

কয়েক ঘন্টা ব্যয় করার পরে, নিম্নলিখিত সিএসএস ক্লাস যুক্ত করা আমার সমস্যার সমাধান করেছে।

বুটস্ট্র্যাপ 3.0 নিয়ে কাজ করুন। *

.tnav .navbar .container { height: 28px; }

বুটস্ট্র্যাপ 3.3.4 দিয়ে কাজ করুন

.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}
.navbar {min-height:28px !important;}

স্ক্রিনশট সহ নভবারের উচ্চতা কাস্টমাইজ করতে এবং হ্রাস করতে সম্পূর্ণ কোড আপডেট করুন ।

সিএসএস:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

ব্যবহারের কোড:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <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="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

Comments

এটি কাজ করে না ... এই পৃষ্ঠায় আমার উত্তরটি পরীক্ষা করুন ... .navbar এর সর্বনিম্ন উচ্চতাটি ডিফল্ট হিসাবে 50px এ সেট করা থাকে, তাই আপনি যদি উচ্চতাটি 28px সেট করেন তবে এটি 50px মিনিট-উচ্চতা দ্বারা ওভাররাইড করা হবে। ..

— প্যাট্রিক

আহ, আমি দেখি যে এই পোস্টটি সম্পাদিত হয়েছিল (প্রচুর!) এবং এখন সত্যই সঠিক কোডটি দেখায়। আমি এখানে আমার পোস্টে ন্যূনতম উচ্চতার সেটিংটিও দেখেছি যে কোনও কারণে একটি ডাউন-ভোট পেয়েছে। সঠিক, বিষয় এবং স্পষ্ট যে কোনও উত্তরটি হ্রাস পেয়ে খুব হতাশ ...

— প্যাট্রিক

@ পেট্রিক আপনার অর্থ কী তা জানেন না তবে সময়ে আমার উত্তরটি আমার নিজের উত্তর দিয়ে সমাধান করা হয়েছিল। খ্যাতির কোনও প্রশ্ন নেই, যদি লোকেরা আমাকে উপরে বা নীচে ভোট দেয়।

— irfanmcsd

উত্স সম্পাদনা করা এটিকে আরও সহজ করে

— লুক

মজার বিষয়, এগুলি আমার পক্ষে কার্যকর হয়নি। আমাকে 50px এর নির্দিষ্ট উচ্চতা ওভাররাইড করতে হয়েছিল;

— কেভিন

Answer 2

কাজের সমাধান:

ডিফল্টরূপে বুটস্ট্র্যাপ 3.0 এর উপরে এবং নীচে একটি 15px প্যাডিং রয়েছে, সুতরাং আমাদের কেবল এটি ওভাররাইড করা দরকার!

উদাহরণ স্বরূপ:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

Comments

ডিফল্ট 10px বুটস্ট্র্যাপ.এসএস এ? .navbar-nav> li> a {padding-top: 10px; প্যাডিং-নীচে: 10px; লাইন-উচ্চতা: 20px; }

— jichi

বুটস্ট্রেপ.সিএসএস (v3.0.2) -তে লাইন নম্বর 3884 দেখুন। এটি .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}ডিফল্টরূপে।

— রণভীর

V3.0.2 সম্পর্কে নিশ্চিত নয়। তবে বুটস্ট্র্যাপ সিএসএস-এ v3.0.3 লাইন 4541 এ, এটি: .navbar-nav> লি> এ {প্যাডিং-শীর্ষ: 10px; প্যাডিং-নীচে: 10px; লাইন-উচ্চতা: 20px; }

— jichi

আপনি স্যার, আমার নায়ক.

— orokusaki

Answer 3

ন। নবারে ন্যূনতম বারের মতো ন্যূনতম উচ্চতার সেটটি কেবল ওভাররাইড করুন:

.navbar{
  min-height:20px; //* or whatever height you require
}

উপাদানগুলির উচ্চতা ন্যূনতম উচ্চতার চেয়ে ছোট কিছুতে পরিবর্তন করা কোনও তাত্পর্যপূর্ণ করবে না ...

Comments

যেমন আপনি নাবারে দেখুন আমি ইতিমধ্যে উচ্চতার সম্পত্তি ব্যবহার করি তবে কোনও প্রভাব নেই।

— irfanmcsd

এটি ন্যূনতম উচ্চতার সম্পত্তি, উচ্চতা নয় ... আপনি যদি উচ্চতাটি ন্যূনতম উচ্চতার চেয়ে কম সংখ্যায় সেট করেন তবে ন্যূনতম উচ্চতা এটিকে ছোট হতে আটকাবে ...

— প্যাট্রিক

কেন এই ডাউনটা পাবেন ?? এটি এই পোস্টে সেট সমস্যার জন্য কার্যকর সমাধান। একজন মডারেটর এটি দয়া করে দেখতে পারেন, এমন একজন ডাউনভোটার বলে মনে হচ্ছে যা প্রকৃত উত্তরটি যাচাই না করে কেবল যে জিনিসগুলির সাথে সম্মত হয় না তাকে কেবল ডাউনভোট করে। আমার পোস্টের একই উত্তর থাকার পরে আরও 2.5 মাস পরে একটি লিঙ্ক পোস্ট করা হয়েছে, এটি একটি বাহ্যিক লিঙ্কে রয়েছে এবং দুটি উত্স পেয়েছে। আমি এটিকে ঘৃণা করি যখন লোকেরা এলোমেলো ডাউনভোটগুলির সাথে এসও মিশ্রিত করে!

— প্যাট্রিক

আমি প্রায়শই নিজেকে জিজ্ঞাসা করতাম কীভাবে লোকেরা এখন তারা ডাউনটা পেয়েছে, আপনি কি কোনও বিজ্ঞপ্তি পান? এটি মেটাতে খুঁজে পেল না

— মেটাতে পেল না আইলিয়ান ওনোফ্রেই

কোনও বিজ্ঞপ্তি নেই ... মনে হচ্ছে লোকেরা যদি অন্য উত্তর আরও ভাল বা অন্য কিছু বলে মনে করে ... ... যদি আমাকে জিজ্ঞাসা করেন তবে কী ধরনের লম্পট ... তবে তারপরেও, এই সাইটটি অহংকার নয়, এটি অন্যকে সাহায্য করার বিষয়ে ...

— প্যাট্রিক

Answer 4

আপনি যদি কম উত্স ব্যবহার করছেন তবে variables.lessফাইলটিতে নববারের উচ্চতার জন্য একটি পরিবর্তনশীল হওয়া উচিত । আপনি যদি উত্সটি ব্যবহার না করে থাকেন তবে বুটস্ট্র্যাপের সাইট সরবরাহ করে এমন কাস্টমাইজ ইউটিলিটি ব্যবহার করে আপনি এটি কাস্টমাইজ করতে পারেন । এবং তারপরে আপনি এটি ডাউনলোড করে আপনার প্রকল্পে অন্তর্ভুক্ত করতে পারেন। আপনি যে পরিবর্তনশীলটি সন্ধান করছেন তা হ'ল:@navbar-height

Comments

তবে আমি মূল নেভ বারের আচরণটি পরিবর্তন করতে চাই না। আমি কেবল অতিরিক্ত শীর্ষ এনএভি বারের জন্য উচ্চতা পরিবর্তন করি।

— irfanmcsd

আমি মনে করি এটিই সেরা সমাধান।

— ইমতিয়াজ

এটি যদি এই সাইটে সেরা মাত্র একটি ন্যাভ থাকে এবং এটি সেই উচ্চতা হওয়া উচিত তবে এটি সেরা সমাধান। আপনার যদি একাধিক ন্যাভ থাকে তবে এটি কিছুটা শক্ত হয়ে যায়, যেহেতু .navbar-উল্লম্ব-সারিবদ্ধতা বেশ কয়েকটি জায়গায় ব্যবহৃত হয় এবং @ নাবার-উচ্চতার একটি শক্ত রেফারেন্স রয়েছে।

— কার্ল বুসেইমা

সুন্দর সমাধান যতক্ষণ আপনি সিডিএন ব্যবহার করার পরিকল্পনা করছেন না

— ইগোর

যতক্ষণ আপনি পৃথক কম আংশিক ক্ষেত্রে ওভাররাইডগুলি ব্যবহার করেন এটি এটি সেরা সমাধান এবং সমস্যা ছাড়াই আপনাকে বুটস্ট্র্যাপ আপগ্রেড করার অনুমতি দেওয়া উচিত।

— কেন যুবরাজ

Answer 5

এটা আমার অভিজ্ঞতা

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

Comments

.Navbar- ফর্মের যত্ন নিতে এটি যুক্ত করুন:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }

— স্টিফ 643

অন্য এক্সটেনশন: .navbar .navbar-Text {মার্জিন-শীর্ষ: 0 পিক্স; মার্জিন-নীচে: 0 পিএক্স; লাইন উচ্চতা: 38px; }

— সিএনমুক

Answer 6

যদি আপনি ছেলেরা আপনার স্টাইলশীটগুলি কম / এসএএসএস দিয়ে জেনারেট করে থাকেন এবং সেখানে বুটস্ট্র্যাপ আমদানি করছেন তবে আমি খুঁজে পেয়েছি যে @ নভবার-উচ্চতা ভেরিয়েবলটি আপনাকে নভবারের উচ্চতা সেট করতে দেয় যা মূলত ভেরিয়েবল.লেস ফাইলটিতে সংজ্ঞায়িত।

Answer 7

আমার 2 পেন্স যুক্ত করতে চেয়েছিলেন এবং তার আসল উত্তরের জন্য জেমস পোলুসকে আপনাকে ধন্যবাদ জানাতেই এটি আমার বিশেষ প্রকল্পের জন্য একমাত্র কাজ করেছিল (বুটস্ট্র্যাপ 3 এর সর্বশেষ সংস্করণ সহ এমভিসি 5)।

এটি বেশিরভাগই নবীদের উদ্দেশ্যে করা হয়, স্পষ্টতার জন্য এবং ভবিষ্যতের সম্পাদনাগুলি আরও সহজ করার জন্য আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি আপনার প্রকল্পের জন্য সিএসএস ফাইলের নীচে একটি অংশ যুক্ত করুন উদাহরণস্বরূপ আমি এটি করতে চাই:

/* Bootstrap overrides */

.some-class-here {
}

উপরে জেমস পুলস এর উত্তর গ্রহণ করা আমি এটি করেছি:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

আমি আমার নভবার উপাদানটিতে পাঠ্যকে নিচে নামানোর জন্য প্যাডিং-শীর্ষ মানগুলি পরিবর্তন করেছি। আপনি বুস্ট্র্যাপ বেস ক্লাসগুলি স্ক্রু না করেই এর মতো কোনও বুটস্ট্র্যাপ উপাদানকে ও তার পক্ষে পরিবর্তন করার একটি ভাল উপায়টিকে আরও অনেক বেশি ওভাররাইড করতে পারেন কারণ আপনি যে সর্বশেষ কাজটি করতে চান সেটি সেখানে পরিবর্তন করা এবং তারপরে বুটস্ট্র্যাপ আপডেট করার পরে এটি হারাতে হবে!

অবশেষে আরও বিচ্ছিন্নতার জন্য আমি আমার সিএসএস ফাইলগুলি বিভক্ত করতে চাই এবং আপনার সাব-ফাইলগুলিকে একটি প্রধান সিএসএস ফাইলে আমদানি করতে ইম্পোর্ট ডিক্লেয়ারেশন ব্যবহার করতে পারি উদাহরণস্বরূপ:

@import url('css/mysubcssfile.css');

দ্রষ্টব্য : আপনি যদি একাধিক ফাইলগুলিতে টানছেন তবে আপনাকে নিশ্চিত করতে হবে যে সেগুলি সঠিক ক্রমে লোড হয়েছে।

আশা করি এটি কাউকে সাহায্য করবে।

Answer 8

আমি মনে করি বিদ্যমান রঙ পরিবর্তন না করে আমরা এই আরও কম শৈলী লিখতে পারি। নিম্নলিখিতগুলি আমার জন্য কাজ করেছে (বুটস্ট্র্যাপ ৩.২.০ এ)

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; }

সর্বশেষটি ('নাবার-ব্র্যান্ড') আসলে আপনার কেবলমাত্র 'ব্র্যান্ড' নাম হিসাবে লেখা থাকলেই প্রয়োজন।

Comments

উত্তম উত্তরটিই কেবলমাত্র আমার জন্য বুটস্ট্র্যাপ 3 এর সর্বশেষতম সংস্করণ (একটি দ্রষ্টব্য: আপনি যদি আপনার পাঠ্যটি নীচে চাপ দিতে চান তবে .navbar- ব্র্যান্ডের ক্লাসের জন্য প্যাডিং-শীর্ষের মান বাড়িয়ে তুলুন। li> একটি ক্লাস।

— তাহির খালিদ

Answer 9

আমি একই সমস্যা পেয়েছি, বুটস্ট্র্যাপ দ্বারা সরবরাহিত আমার মেনু বারের উচ্চতা খুব বড় ছিল, আসলে আমি কিছু ভুল বুটস্ট্র্যাপ ডাউনলোড করেছি, শেষ পর্যন্ত এই সাইট থেকে অরিগেনাল বুটস্ট্র্যাপ ডাউনলোড করে এ থেকে মুক্তি পেয়েছি .. http://getbootstrap.com/2.3 .2 / yii (নেটবিন) এ বুটস্ট্র্যাপ ব্যবহার করতে চান এই টিউটোরিয়ালটি অনুসরণ করুন, https://www.youtube.com/watch?v=XH_qG8gphaw ... ভয়েস উপস্থিত নেই তবে পদক্ষেপগুলি ধীর গতিতে আপনি সহজেই বুঝতে এবং প্রয়োগ করতে পারবেন তাদের। ধন্যবাদ

Comments

কাঙ্ক্ষিত প্রভাব পেতে আপনি কোডটিতে কী পরিবর্তন করেছেন? যদি আপনি কোনও উত্তরে কোনও লিঙ্কে নির্দেশ করেন তবে আপনার সমাধানটির সংক্ষিপ্তসার করা উচিত।

— ব্রায়ান