লোগো সহ বুটস্ট্র্যাপ 3 নববার

Question

আমি টেক্সট ব্র্যান্ডিংয়ের পরিবর্তে কোনও চিত্র লোগো সহ বুটস্ট্র্যাপ 3 ডিফল্ট নববারটি ব্যবহার করতে চাই। বিভিন্ন পর্দার আকারের কোনও সমস্যা সৃষ্টি না করে এটি করার সঠিক উপায় কী? আমি এটি একটি সাধারণ প্রয়োজনীয়তা ধরে নিচ্ছি, তবে আমি এখনও কোনও ভাল কোডের নমুনা দেখিনি। সমস্ত স্ক্রিন আকারে গ্রহণযোগ্য প্রদর্শন ছাড়া অন্য একটি মূল প্রয়োজনীয়তা হ'ল ছোট পর্দার মেনু সঙ্কুচিত।

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

যাইহোক, আমার লোগো চিত্রটি নাবারের উচ্চতার চেয়ে বড়।

Comments

<img src="logo.png" width="27px" />: সমন্বয় করুন

— উদয় হিওরালে

এই প্রশ্নের কাছে জমা দেওয়া সমস্ত উত্তর সহ, কেন তাদের একটির সমাধান হিসাবে চিহ্নিত করা হয়নি?

— ক্রিস

দুটি কারণ, আমার মনে হয়: ১. যদি কেউ সাইটটি পুনরুদ্ধার করে তবে ডাইমেনশনটি সিএসএসের পরিবর্তে এইচটিএমএলে স্থির করা হয়েছে, সুতরাং এটি একটি রক্ষণাবেক্ষণের দুঃস্বপ্ন তৈরি করে। 2. যাইহোক এটি উচ্চতা = "27px" হওয়া উচিত নয়? এটি উচ্চতা, প্রস্থ নয়, সীমাবদ্ধ।

— কানক

প্রস্থ এবং উচ্চতা-গুণাবলী উভয়ই তাদের মানটিকে পিক্সেল হিসাবে ধরে নিয়েছে, অতএব আপনার gthe মানতে 'px' যুক্ত করা উচিত নয়। width="27"

— jmmeijer

সমস্ত বিষয় বিবেচিত, এটি সেরা উত্তর এবং স্ট্যাকওভারফ্লো . com/a/26333342/171456 গ্রহণ করা উচিত । এটি 2013 এর পর থেকে এই প্রশ্নটি পরিদর্শনকারী বিস্তৃত এসও সম্প্রদায়ের প্রয়োজনীয়তার জন্য কাজ করে

— জিম

Answer 1

সবাই কেন এটিকে কঠোরভাবে করার চেষ্টা করছে? অবশ্যই, এইগুলির মধ্যে কয়েকটি ব্যবহার করবে তবে এটি প্রয়োজনীয়তার চেয়ে জটিল।

ঠিক আছে, প্রথমে - আপনার এমন একটি চিত্রের দরকার যা আপনার নভবারের মধ্যে খাপ খায়। আপনি সিএসএস উচ্চতা বৈশিষ্ট্য (স্কেল প্রস্থকে মঞ্জুরি দেওয়া) এর মাধ্যমে আপনার চিত্রটি সামঞ্জস্য করতে পারেন বা আপনি উপযুক্ত আকারের চিত্র ব্যবহার করতে পারেন। আপনি যা কিছু সিদ্ধান্ত নেবেন - এই চেহারাটি আপনার চিত্রটিকে কতটা আকার দেবে তার উপর নির্ভর করবে।

কোনও কারণে, প্রত্যেকে নোঙ্গরের ভিতরে থাকা চিত্রটি আটকে রাখতে চায় navbar-brandএবং এটি প্রয়োজনীয় নয়। শ্রেণীর navbar-brandপাশাপাশি navbar-left(যেমন টান-বামের মতো, তবে একটি নভবারে ব্যবহারের জন্য) পাঠ্যের শৈলীর প্রয়োগ করা হয় যা কোনও চিত্রের জন্য প্রয়োজনীয় নয় । আপনার যা দরকার তা হ'ল যুক্ত করা navbar-left।

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

এমনকি আপনি এটি নভবার-ব্র্যান্ডের আইটেমটি অনুসরণ করতে পারেন, যা চিত্রের ডানদিকে প্রদর্শিত হবে।

Comments

আমি অনুমান করি যে লোকেদের অ্যাঙ্কর ট্যাগের ভিতরে ছবিটি রাখার কারণ এটি হ'ল বুস্ট্রাপ ডক এটি করে: getbootstrap.com/components/#navbar-brand-image

— cafonso

আপনি যদি একটি বৃহত্তর চিত্র ব্যবহার করতে চান?

— স্টিভেনপি

@ ক্যাফোনসো - আমি বলছি না যে এটি কোনও নোঙ্গরের সাথে সম্পর্কিত নয় - কেবলমাত্র অ্যাঙ্করটির জন্য "নভবার-ব্র্যান্ড" শ্রেণির প্রয়োজন নেই। যখন class শ্রেণিটি উপস্থিত থাকে - এটি চিত্রগুলি যেভাবে প্রদর্শিত হয় তা সত্যিই মেসে পড়ে।

— মাইকেল

@ ক্যাফোনসো একটি দুর্দান্ত বিষয় তুলে ধরেছে। আমি বিশ্বাস করি যে টিডব্লিউবিএস এটি কোনও চিত্র বা পাঠ্যের জন্য ব্যবহার করার ইচ্ছা করেছিল। এবং এর সাথে কতজন লোককে সমস্যা হয়েছে তা বিবেচনা করে বোঝানো উচিত যে এটি তাদের সময় ঠিক করার বা তাদের ডক্সে এটি পরিষ্কার করার সময়।

— ব্রায়ান উইলিস

@ মিশেল, অফিসিয়াল বুটস্ট্র্যাপ ডকুমেন্টেশন উদাহরণগুলি ক্লাসের সাথে অ্যাঙ্কর দেখায় navbar-brand। এটি বিভ্রান্তির উত্স।

— জাস্টিন স্কাইল

Answer 2

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Comments

নেতিবাচক মার্জিন কি জন্য?

— আয়রাদ

নেতিবাচক মার্জিনটি এটি আমার জন্য উল্লম্বভাবে কেন্দ্রীভূত করতে সহায়তা করেছিল।

— মতো

এডওয়ার্ডের মন্তব্যে অনুসরণ করা ... বা কমপক্ষে একটি

— কার্যত

আপনাকে নেতিবাচক মার্জিনের সাথে জগাখিচু করা উচিত নয় (যদি না ছবিটি মজাদার আকারে কাটা হয়)। এই উপায়টি কোনও শব্দ সমাধান নয় যদিও এটি সম্পূর্ণ লোগো আকারের উপর নির্ভর করে এবং কেস ভিত্তিতে কেস অনুযায়ী সামঞ্জস্য করতে হবে। এই পদ্ধতির একটি ওয়ার্কিং ডেমো এখানে ।

— ব্রায়ান উইলিস

লোগোর আকার / রেশন নির্বিশেষে নিয়মিতভাবে কাজ করবে এমন একটি ভাল বিকল্প হ'ল আইএমজি-প্রতিক্রিয়াশীলটি উল্টোটি বাদ দিয়ে যা করে তা করে do যেহেতু .navbar- ব্র্যান্ডটি ভাসমান: বাম প্রয়োগ হয়েছে এটি একটি ব্লক উপাদান হয়ে যায় এবং এটির উচ্চতা 50px হওয়ায় আমরা চিত্রের সর্বোচ্চ উচ্চতা 100% এ সেট করতে পারি; এবং এটি কখনই উপচে পড়বে না বা পুরো নাবারকে বাড়িয়ে তুলবে। .Navbar- ব্র্যান্ডের উচ্চতার সাথে মানিয়ে নিতে এটি সীমাবদ্ধ হয়ে পড়ে। যদি এটি ডিফল্ট 50px নাভিবারে খুব ছোট দেখাচ্ছে তবে কেবলমাত্র .navbar-brand> img শীর্ষ এবং নীচের প্যাডিং সামঞ্জস্য করুন। ওয়ার্কিং ডেমো সহ এখানে সম্পূর্ণ উত্তর

— ব্রায়ান উইলিস

Answer 3

অনেক উদাহরণের সাথে ডেমো পূরণ করুন

গুরুত্বপূর্ণ আপডেট: 12/21/15

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

শুধু তোমার CSS এবং ব্যবহার NavBar-ব্র্যান্ড একই ভাবে আপনি would এই অ্যাড .img-responsive। আপনার লোগোটি স্বয়ংক্রিয়ভাবে ফিট হবে

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

আর একটি বিকল্প পটভূমি চিত্র ব্যবহার করা হয়। যে কোনও আকারের চিত্র ব্যবহার করুন এবং তারপরে কেবল পছন্দসই প্রস্থটি সেট করুন:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

---

মূল উত্তর নীচে (কেবলমাত্র রেফারেন্সের জন্য)

লোকেরা মনে হয় অবজেক্টের বিষয়ে অনেক কিছু ভুলে যায়। ব্যক্তিগতভাবে আমি মনে করি এটির সাথে কাজ করা সবচেয়ে সহজ কারণ চিত্রটি স্বয়ংক্রিয়ভাবে মেনু আকারের সাথে সামঞ্জস্য হয়। আপনি যদি ইমেজটিতে কেবলমাত্র অবজেক্ট ফিট ব্যবহার করেন তবে এটি মেনুগুলির উচ্চতায় স্বয়ংক্রিয় আকার পরিবর্তন করবে।

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

এটি নির্দেশিত ছিল যে এটি "" এখনও "তে কাজ করে না। একটি পলিফিল রয়েছে , তবে আপনি যদি এটি অন্য কোনও কিছুর জন্য ব্যবহার না করার পরিকল্পনা না করেন তবে তা অতিরিক্ত। দেখে মনে হচ্ছে অবজেক্ট-ফিট আইইয়ের ভবিষ্যতের প্রকাশের জন্য পরিকল্পনা করা হচ্ছে যাতে এর পরে সমস্ত ব্রাউজারে এটি কাজ করবে।

তবে, আপনি যদি বুটস্ট্র্যাপে .img- প্রতিক্রিয়াশীল ক্লাসটি লক্ষ্য করেন সর্বাধিক প্রস্থটি আপনি ধরে নিচ্ছেন যে আপনি এই চিত্রগুলি কলামগুলিতে বা সেটের সাথে সুস্পষ্ট কিছু রেখেছেন। এর অর্থ হ'ল 100% এর অর্থ প্যারেন্ট উপাদানগুলির 100% প্রস্থ specifically

    .img-responsive
        max-width: 100%;
        height: auto;
    }

আমরা নাবারের সাথে এটি ব্যবহার করতে পারি না কারণ পিতামাতার (.navbar-ব্র্যান্ড) এর নির্দিষ্ট উচ্চতা 50px রয়েছে তবে প্রস্থটি সেট করা হয়নি।

তাহলে আমরা যে যুক্তিবিজ্ঞান গ্রহণ করা এবং বিপরীত এটি উচ্চতা উপর ভিত্তি করে প্রতিক্রিয়াশীল হতে আমরা যে .navbar-ব্র্যান্ড উচ্চতা এবং যুক্ত করা এবং স্বয়ংক্রিয় সেট দাঁড়িপাল্লা প্রস্থ এটা অনুপাত সমন্বয় হবে যারা একটি প্রতিক্রিয়াশীল ইমেজ থাকতে পারে।

max-height: 100%;
width: auto;

সাধারণত আমাদের display:block;দৃশ্যে যোগ করতে হবে, তবে যেহেতু নাবার-ব্র্যান্ডটি ইতিমধ্যে ভাসমান: বাম; এটি প্রয়োগ করা হয়, এটি স্বয়ংক্রিয়ভাবে একটি ব্লক উপাদান হিসাবে কাজ করে।

---

আপনার লোগোটি খুব ছোট যেখানে আপনি এমন বিরল পরিস্থিতিতে চলে যেতে পারেন। আইএমজি-প্রতিক্রিয়াশীল পদ্ধতির বিষয়টি বিবেচনায় নেই, তবে আমরা তা করব। আপনার "উচ্চতা" বৈশিষ্ট্যটি যুক্ত করেও .navbar-brand > imgআপনি নিশ্চিত হতে পারেন যে এটি পাশাপাশি স্কেলও বাড়বে।

max-height: 100%;
height: 100%;
width: auto;

---

সুতরাং এটি সম্পূর্ণ করতে আমি তাদের উভয়কে একসাথে রেখেছি এবং মনে হয় এটি সমস্ত ব্রাউজারে পুরোপুরি কাজ করে।

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

ডেমো http://codepen.io/bootstraped/pen/KwYGwq

Comments

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

— ব্রায়ান উইলিস

নিশ্চিত! ওয়েবকিট / ব্লিঙ্ক ইঞ্জিন থেকে অবজেক্ট-ফিট অন্যতম অসামান্য সংযোজন। আশা করি অন্যান্য ব্রাউজারগুলি শীঘ্রই তাদের সংহত করবে! ইতিমধ্যে আমরা কঠোর পরিশ্রম করতে ব্যাকগ্রাউন্ড চিত্র ব্যবহার করব!

— জোস এ

আরে হোসে আসলে কিছু একটা বের করে ফেলেছে। নতুন ডেমো পরীক্ষা করুন। এটি আসলে মনে হচ্ছে আমার আসল উত্তরটি অন্য সমস্ত ব্রাউজারগুলিতে অবজেক্ট ফিটের কারণে নয় উচ্চতা এবং সর্বোচ্চ-উচ্চতার কারণে কাজ করছে। আমার মনে হয় এর জন্য যা প্রয়োজন তা সত্যিই ... আপনি কি এমন পরিস্থিতি খুঁজে পাবেন যেখানে উপরের কাজগুলি এখন কাজ করবে না?

— ব্রায়ান উইলিস

আমি এমনকি উচ্চতা এবং উচ্চতাটি যেমন ধারক উচ্চতার আকারের আকারের চেয়ে অনেক বেশি পরিবর্তন করতে পারি না বলেই মনে করি না object

— ব্রায়ান উইলিস

হোসে আপনার কি মনে হয় যে অবজেক্ট ফিট কি কিছু করছে? আমি ভাবছি আমরা সম্ভবত এ ক্ষেত্রে এটি ফেলে দিতে পারি, তবে আমি নিশ্চিত নই?

— ব্রায়ান উইলিস

Answer 4

যদিও আপনার প্রশ্নটি আকর্ষণীয় তবে আমি আশা করি না এর জন্য একটি উত্তর হবে। আপনার প্রশ্নটি খুব বিস্তৃত হতে পারে। আপনার সমাধানটির উপর নির্ভর করা উচিত: নাবারে থাকা অন্যান্য সামগ্রী (আইটেমের সংখ্যা), আপনার লোগোটির আকার, আপনার লোগোটি প্রতিক্রিয়াশীল কাজ করবে etc. আমার নাভবার-ব্র্যান্ডের ক্লাসটি ব্যবহার করা উচিত কারণ এটি 15 পিক্সেলের প্যাডিং (শীর্ষ / নীচে) যুক্ত করবে।

300x150 পিক্সেলের লোগো সহ আমি এই সেটিংটি http://getbootstrap.com/example/navbar/ এ পরীক্ষা করি ।

পূর্ণ স্ক্রীন> 1200:

768 থেকে 992 পিক্সেলের মধ্যে (মেনুটি ধসে পড়ে না):

<768 (মেনু ধসে)

নান্দনিক দিকগুলি ছাড়াও আমি কোনও প্রযুক্তিগত সমস্যা পাইনি। ছোট পর্দায় একটি বড় লোগো ওভারল্যাপ করবে বা ভিউপোর্টটি সম্ভবত ছিন্ন করবে। 768 থেকে 992 পিক্সেলের মধ্যে পর্দাতেও অন্যান্য সমস্যা রয়েছে যখন বিষয়বস্তু একটি লাইনে ফিট করে না, উদাহরণস্বরূপ দেখুন: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

ডিফল্ট নাবারটিতে ডিফল্ট নববার উদাহরণটি 30px এর নীচে-মার্জিন যুক্ত করে যাতে আপনার নাবারের সামগ্রীটি কখনই আপনার পৃষ্ঠার সামগ্রীতে ওভারল্যাপ না করে। (নাভবারের উচ্চতা পরিবর্তিত হলে স্থির নববারে সমস্যা হবে)।

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

আপডেট দেখুন উদাহরণস্বরূপ http://bootply.com/77512 ।

একটি ফোনের মতো ছোট পর্দায়, ধসে যাওয়া মেনুটি লোগোর উপরে উপস্থিত হয়

আপনার কোডে বোতাম এবং লোগোটি বিনিময় করুন, প্রথমে লোগো (ফ্লোট সেট করুন: লোগোতে বাম)

শীর্ষগুলি ব্যতীত মেনু আইটেমগুলিকে সারিবদ্ধ করার কোনও উপায় নেই

সেট margin-topজন্য .navbar-collapse ul। নীচে প্রান্তিককরণ করতে লোগো উচ্চতা মাইনাস নাবার বার উচ্চতা ব্যবহার করুন বা (কেন্দ্রে লোগো উচ্চতা - নাবার বার উচ্চতা) / 2

Comments

আমি এই বিকল্পটি চেষ্টা করেছিলাম। এটির সাথে দুটি সমস্যা হ'ল: ১) ফোনের মতো ছোট পর্দায়, ধসে পড়া মেনুটি লোগোর উপরে উপস্থিত হয় (এমনকি আমি লোগো ইমগ ট্যাগটিতে ইমজি-প্রতিক্রিয়াশীল শ্রেণি যুক্ত করি) এবং ২) মেনুটি সারিবদ্ধ করার কোনও উপায় নেই শীর্ষ ছাড়া অন্য কিছুতে আইটেম। অন্য কোনও সামঞ্জস্যের কারণে ধসে পড়া মেনুটি সঠিকভাবে কাজ না করতে পারে।

— স্টেপানিয়ান

Answer 5

ডিফল্ট উচ্চতা (50px) এর চেয়ে বড় লোগো সহ কীভাবে একটি বুটস্ট্র্যাপ নববার তৈরি করবেন তা নির্দেশিকা:

একটি লোগো 100px x 100px, স্ট্যান্ডার্ড CSS সহ উদাহরণ :

1. লোগোর উচ্চতা এবং (প্যাডিং শীর্ষ + প্যাডিং নীচে) গণনা করুন। এখানে 120px (100px উচ্চতা + প্যাডিং শীর্ষ (10px) + প্যাডিং নীচে (10px))

2. যান বুটস্ট্র্যাপ / কাস্টমাইজ । নাবারের উচ্চতা 50px> 120px (50 + 70) এর পরিবর্তে সেট করুন এবং 340px থেকে নাবার -পতন-সর্বোচ্চ-উচ্চতা 410px (340 + + 70)। সিএসএস ডাউনলোড করুন ।

3. এই উদাহরণে আমি এই নাবারটি ব্যবহার করি । ইন NavBar-ব্র্যান্ড :

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   যোগ উদাহরণস্বরূপ, একটি বর্গ myLogo , এবং একটি চিত্র (আপনার লোগো)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>।

4. যোগ সিএসএস

   .myLogo {প্যাডিং: 10px; }

5. অন্যান্য আকারের জন্য পর্যাপ্ত।

উদাহরণ

Comments

এখানে সবচেয়ে বুদ্ধিমান সমাধান। থাম্বস আপ

— ইউজার 3718908

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। ইমেজ ফিট করার জন্য এটি নভবারকে পুনরায় আকার দেওয়ার বিষয়টি সমাধান করে।

— গ্রেগ গাম

Answer 6

ঠিক আছে, অবশেষে আমি একই সমস্যাটি কাজ করতে পেরেছি, এখানে আমার সমাধান এবং আমি এটি তিনটি বড় ব্রাউজারে নিজের সাইটে এটি পরীক্ষা করেছি: ক্রোম, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার।

প্রথমত আপনি যদি কোনও পাঠ্য ভিত্তিক লোগো ব্যবহার না করে থাকেন তবে "নাবার-ব্র্যান্ড" পুরোপুরি সরিয়ে ফেলুন কারণ আমি এই নির্দিষ্ট বর্গটিকে আমার ধসে পড়া এনএভি মেনু দ্বিগুণ হওয়ার মূল কারণ বলে মনে করেছি।

আমাকে সঠিক দিকে পরিচালিত করার জন্য ব্যবহারকারীর পক্ষে চিত্কার করুন 13137032।

আপনাকে একটি কাস্টম প্রতিক্রিয়াশীল চিত্র ধারক তৈরি করতে হবে, আমি আমার "লোগো"

বুটস্ট্র্যাপ এইচটিএমএল চিহ্নিত করা এখানে:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

এবং সিএসএস কোড:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@ মিডিয়াতে মান (সর্বোচ্চ-প্রস্থ: এক্স) আপনার লোগো চিত্রগুলির প্রস্থের উপর নির্ভর করে পরিবর্তিত হতে পারে, খনিটি 368px। শতাংশগুলি আপনার লোগোর আকারের উপর নির্ভর করে পরিবর্তনের প্রয়োজন হতে পারে। প্রথম @ মিডিয়া ক্যোয়ারীটি আপনার প্রান্তিক হওয়া উচিত এবং আমার চিত্রটি প্রস্থ (368px) ছিল + ধসে যাওয়া বোতামের আকার (44px) + প্রায় 60px এবং এটি 480px এ এসেছিল যেখানে আমি প্রতিক্রিয়াশীল চিত্রের স্কেলিং শুরু করি।

এইচটিএমএল অংশ থেকে আমার রেজার সিনট্যাক্স অপসারণ করতে ভুলবেন না। এটি আপনার সমস্যার সমাধান করে কিনা তা আমাকে জানিয়ে দিন it

সম্পাদনা: দুঃখিত, আমি আপনার নভবার উচ্চতার সমস্যাটি মিস করেছি। এটি সম্পর্কে বেশ কয়েকটি উপায় আছে, ব্যক্তিগতভাবে আমি বুটস্ট্র্যাপটি LESS যথাযথ নাভবার উচ্চতার সাথে সংকলন করি, আমার প্রয়োজনে আমি 70px ব্যবহার করি এবং আমার চিত্রের উচ্চতা 68 পিক্সেল। এটি করার দ্বিতীয় উপায়টি হ'ল নিজেই বুটস্ট্র্যাপ সিএসএস ফাইল, ".navbar" অনুসন্ধান করুন এবং নূন্যতম উচ্চতা পরিবর্তন করুন: আপনার লোগোর উচ্চতায় to

Comments

এটি আসল উত্তর

— স্টিভেনপি

ক্লাস অপসারণ navbar-brandআমার জন্য এটি করেছে।

— কাই হার্টম্যান

Answer 7

আমার সমাধানটি আইএমজি ট্যাগে সিএসএস "ডিসপ্লে: ইনলাইন-ব্লক" যুক্ত করছে।

<img style="display: inline-block; height: 30px; margin-top: -5px">

ডেমো: জেসফিডাল

Answer 8

আমি img- প্রতিক্রিয়াশীল শ্রেণি ব্যবহার করি এবং তারপরে aউপাদানটির উপর একটি সর্বাধিক প্রস্থ সেট করি । এটার মত:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

এবং সিএসএস:

.navbar-brand {
    max-width: 50%;
}

Comments

আমি বিশ্বাস করি যে এর মানে আপনি আপনার ইমেজ প্রস্থ সেটিং করছি <a>পরিবর্তে ট্যাগের <img>ট্যাগ করেন img-responsiveসেট max-width="100%"। এটি কীভাবে সহায়ক তা আপনি ব্যাখ্যা করতে পারেন?

— মাইকেল শ্যাপার 21

মাইকেল একটি ভাল পয়েন্ট সামনে এনেছে। .image-responsiveচিত্রের স্পষ্ট ধারক WIDTH এর উপর ভিত্তি করে চিত্রের আকার পরিবর্তনের জন্য বোঝানো হয়েছে, উচ্চতা নয় যা প্রস্থের ভিত্তিতে আকার পরিবর্তন করে। সুতরাং এটি কতগুলি উপার্জন সত্ত্বেও এটি এখানে কাজ করবে না । তবে আমরা একই পদ্ধতিটি ব্যবহার করতে পারি যা চিত্র প্রতিক্রিয়াশীল করে এবং উচ্চতায় এটি প্রয়োগ করে। সুতরাং সমীকরণ থেকে .img- প্রতিক্রিয়া সরান এবং কেবল নভবার-ব্র্যান্ডের সর্বোচ্চ-উচ্চতা সেট করুন । আমার উত্তর এখানে দেখুন ।

— ব্রায়ান উইলিস

Answer 9

আপনার কোডটি অবশ্যই এটি ব্যবহার করুন:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

একটি ট্যাগের শ্রেণি অবশ্যই "লোগো" হতে হবে নাবারবার-ব্র্যান্ড।

Answer 10

এটি আপনার লোগোটি কত লম্বা হতে চান তার উপর নির্ভর করে।

নাবারটিতে ডিফল্ট <a>উচ্চতা 20px হয়, সুতরাং আপনি যদি height: 20pxনিজের লোগোতে নির্দিষ্ট করে থাকেন তবে এটি দুর্দান্তভাবে বিন্যস্ত হবে।

তবে এটি একটি লোগোটির জন্য ছোট ধরণের, সুতরাং আমি যা পছন্দ করলাম তা হ'ল:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

এটি চিত্রটিকে 30px লম্বা করে এবং উলম্বভাবে শীর্ষে নেতিবাচক মার্জিন যুক্ত করে চিত্রটিকে সারিবদ্ধ করে তোলে (5px একটি এবং চিত্রের আকারের প্যাডিংয়ের মধ্যে পার্থক্যের অর্ধেক)।

পর্যায়ক্রমে আপনি <a>উপাদানটির প্যাডিং পরিবর্তন করতে পারেন , যেমন:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Answer 11

দ্রুত ঠিক করা : আপনার জন্য একটা শ্রেণী তৈরি করুন logoএবং সেট heightকরার 28px। এটি সমস্ত ডিভাইসে নাবারের সাথে ভালভাবে কাজ করে। লক্ষ্য করুন আমি বলেছি "ওয়েল" কাজ করে।

.logo {
  display:block;
  height:28px;
}

Answer 12

আমার পদ্ধতির মধ্যে ফোন, ট্যাবলেট, ডেস্কটপ, বড় ডেস্কটপগুলির জন্য বিভিন্ন আকারের চারটি বিভিন্ন চিত্র অন্তর্ভুক্ত করা তবে কেবল বুটস্ট্র্যাপের প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস ব্যবহার করে একটি দেখানো হবে:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

দ্রষ্টব্য: আপনি প্রদত্ত কোড সহ মন্তব্য করা লাইনটি প্রতিস্থাপন করতে পারেন। আপনি ওয়ার্ডপ্রেস ব্যবহার না করে থাকলে পিএইচপি কোডটি প্রতিস্থাপন করুন।

নোট 2 সম্পাদনা করুন: হ্যাঁ, এটি পৃষ্ঠাটি লোড করার সময় এটি আপনার সার্ভারে অনুরোধগুলি যুক্ত করে যা কিছুটা ধীরে ধীরে কমতে পারে তবে আপনি যদি একটি পটভূমি সিএসএস স্প্রিট কৌশল ব্যবহার করেন তবে কোনও পৃষ্ঠা প্রিন্ট করার সময় লোগোটি মুদ্রিত হয় না এবং উপরের কোডটি পাওয়া উচিত আরও ভাল এসইও

Comments

আপনি একটি একক <a> ব্যবহার করতে পারেন এবং কেবল মাত্র 4 টি <img> রাখতে পারেন, প্রতিটি আকারের জন্য একটি।

— জোনাথন ভানাসকো

@ জোনাথান ভানাসকো, আপনি কীভাবে তা করবেন তা জানতে আগ্রহী

— হব

ট্যাগটি visible-SIZEথেকে সরান a, এবং এটি ইমগ ট্যাগে রাখুন। <a class="navbar-brand"><img class="visible-xs"/><img class="visible-sm"/></a>

— জোনাথন ভানাসকো

Answer 13

আপনার অতিরিক্ত সিএসএস যুক্ত করার দরকার নেই, যেহেতু বুটস্ট্রা ৩ এটি সরবরাহ করে। আপনি এটি যুক্ত করতে না চাইলে না। এই লোগোটি বাম দিকে রাখার জন্য আমার কোড এবং ডানদিকে লিঙ্কগুলি। এই নেভিগেশন প্রতিক্রিয়াশীল। আপনি যেমন উপযুক্ত দেখেন তেমন পরিবর্তন করুন।

এইচটিএমএল:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 14

আমি এটি CSS ব্যাকগ্রাউন্ড সম্পত্তি দ্বারা প্রয়োগ করি। এটি কোনও প্রস্থের মানতে স্বাস্থ্যকর কাজ করে।

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

Answer 15

আর একটি পন্থা হ'ল পটভূমির চিত্র সহ ব্র্যান্ডের পাঠ্য / সামগ্রী প্রতিস্থাপনের পাশাপাশি বুটস্ট্র্যাপের অন্তর্নির্মিত .text-hideবর্গটি প্রয়োগ করা .navbar-brand।

সিএসএস:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

এইচটিএমএল:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

এটি একটি খুব সামঞ্জস্যপূর্ণ পদ্ধতি এবং আপনার চিত্রকে কেন্দ্র করে রাখে। চিত্রটির আকার সামঞ্জস্য করার .navbar-brandজন্য উচ্চতা ইতিমধ্যে সেট করা হওয়ার কারণে আপনাকে প্রস্থকে সামঞ্জস্য করতে হবে ।

এখানে একটি লাইভ ডেমো রয়েছে

Answer 16

আমারও একই সমস্যা ছিল। আমি এটি এর মতো সমাধান করেছি:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

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

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

Answer 17

হতে পারে এটি খুব সহজ, তবে আমি কেবল নভবার-ব্র্যান্ড লাইনটি অনুলিপি করেছি যাতে তাদের দুটি রয়েছে, চিত্র এবং তারপরে পাঠ্য।

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

এবং আমি একটি চিত্র তৈরি করেছি যা নাবারের অভ্যন্তরে ফিট হয় (প্রায় উচ্চতা প্রায় 1/2)।

Answer 18

যদি কম ব্যবহার করে তবে এটি কাজ করে:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

Answer 19

আপনার ব্র্যান্ড কেন্দ্রিক এবং টুলবারে অটো প্রস্থ সহ দেখতে প্রয়োজন হলে এই কোডটি নিখুঁত কাজ করে। এটিতে সঠিক পথ থেকে চিত্র ফাইলটি পেতে ওয়ার্ডপ্রেস ফাংশন রয়েছে:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Answer 20

.navbar-brandক্লাসে নিম্নলিখিতগুলি যুক্ত করুন

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

Answer 21

আমার কাজের কোড - বুটস্ট্র্যাপ 3.0.3। যখন নাবার-টগল হয়, লুকানো- xs মূল লোগো চিত্র।

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

Answer 22

আপনি নীচের মতো @ মিডিয়া ক্যোয়ারী ব্যবহার করার চেষ্টা করতে পারেন।

প্রথমে একটি লোগো শ্রেণি যুক্ত করুন, তারপরে আপনার লোগোটির উচ্চতা এবং ডিভাইস আকারের প্রস্থ নির্দিষ্ট করতে @ মিডিয়া ব্যবহার করুন। নীচের উদাহরণে, আমি ডিভাইসগুলি লক্ষ্যবস্তু করছি যার সর্বাধিক প্রস্থ 320px (আইফোন) রয়েছে আপনি যতক্ষণ না সেরা ফিট পান ততক্ষণ আপনি এগুলি নিয়ে খেলতে পারবেন। পরীক্ষার সহজ উপায়: পরিদর্শন উপাদান সহ ক্রোম বা ফায়ারফক্স ব্যবহার করুন। আপনার ব্রাউজারটিকে যতদূর সম্ভব সঙ্কুচিত করুন। আপনার দ্বারা নির্দিষ্ট @ মিডিয়া সর্বোচ্চ প্রস্থের উপর ভিত্তি করে লোগো আকার পরিবর্তন পর্যবেক্ষণ করুন। পছন্দসই ফলাফল পেতে আইফোন, অ্যান্ড্রয়েড ডিভাইস, আইপ্যাড ইত্যাদির উপর পরীক্ষা করুন।

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

Answer 23

নিম্নলিখিত কোড চেষ্টা করুন:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

Answer 24

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

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

এবং সিএসএস ফাইলে আমি নিম্নলিখিতগুলি যুক্ত করেছি:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

দ্রষ্টব্য যে @Html.ActionLink()কোনও <a>ট্যাগের জন্য রেজার সিনট্যাক্স । যেখানে এটি @Html.ActionLink(...)কেবল একটি উপযুক্ত <a>ট্যাগ দিয়ে এটি প্রতিস্থাপন করে বলে । সমানভাবে যেখানে এটি বলেছে @Url.Action(...)এটি উপযুক্ত URL এর সাথে প্রতিস্থাপন করুন ( <a>সেক্ষেত্রে কোনও ট্যাগ নেই )।

Answer 25

এটি শব্দার্থক নয় তবে আমি কেবল বিদ্যমান aউপাদানটি ব্যবহার করছি , একটি পটভূমি চিত্র সেট করব, তারপরে @ 2x রেজোলিউশন, ছোট স্ক্রিনের আকার ইত্যাদির জন্য একাধিক প্রকরণ তৈরি করব

তারপরে, আপনি .text-hideওল 'ফ্যাশন উপায়ে পৃষ্ঠায় কিছু পাঠ্য পেতে ক্লাসটি ব্যবহার করতে পারেন । কোনও চিত্রের যথাযথ ব্যবহার না হলেও সহজ এবং কার্যকর।

পাঠ্য-প্রতিস্থাপনের জন্য সহায়ক শ্রেণীর লিঙ্কটি এখানে:

http://getbootstrap.com/css/#helper-classes

Answer 26

এই প্রশ্নের সবচেয়ে সহজ এবং সর্বোত্তম উত্তর হ'ল আপনার লোগোর উপর নির্ভর করে সর্বাধিক প্রস্থ এবং উচ্চতা নির্ধারণ করা, চিত্রটি সর্বোচ্চ 50px উচ্চ হবে তবে 200px এর বেশি হবে না।

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

আপনার লোগোর আকার এবং আপনার কাছে থাকা এনএভি বার আইটেমগুলির উপর নির্ভর করে এটি পৃথক হবে।

Answer 27

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

দয়া করে আপনার নিজের চেষ্টায় কোডটি বুঝুন: ডি এটি আমার খসড়া কোড এবং এটি ইতিমধ্যে কাজ করছে :) এখানে স্ক্রিনশট।

Answer 28

পাঠ্য ব্র্যান্ডিং প্রতিস্থাপনের পরিবর্তে, আমি নীচের কোডের মতো দুটি সারিতে বিভক্ত হয়ে img-responsiveচিত্রটিকে ক্লাস দিয়েছি ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

এবং অতিরিক্ত হিসাবে আমি নিম্নলিখিত সিএসএস কোডগুলি যুক্ত করেছি .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

আমার কোড যদি আপনার সমস্যা সমাধান করে তবে তা আমার আনন্দ .....

Answer 29

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// আপনার কোডের শিরোনামে বুটস্ট্র্যাপ যুক্ত করতে ভুলবেন না।