টুইটারে <hr> ট্যাগ বুটস্ট্র্যাপ সঠিকভাবে কাজ করছে না?

Question

আমার কোডটি এখানে:

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

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

এইচআর ট্যাগটি যেমনটি আশা করি তেমন কাজ করে না বলে মনে হয়। একটি রেখা আঁকার পরিবর্তে এটি একটি ফাঁক তৈরি করে, যেমন:

Answer 1

সিএসএস সম্পত্তি হ'ল <hr>:

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

এটি খুব হালকা ধূসর এবং 18px এর উল্লম্ব মার্জিন সহ 1px অনুভূমিক রেখার সাথে সমান।

এবং কারণ <hr>একটি ভিতরে <div>বর্গ ছাড়া প্রস্থ বিষয়বস্তুর উপর নির্ভর করে<div>

যদি আপনি চান <hr>পুরো প্রস্থ হতে, প্রতিস্থাপন <div>সঙ্গে <div class='row'><div class='span12'>(ক্লোজিং ট্যাগ অনুযায়ী সহ)।

আপনি যদি অন্যরকম কিছু আশা করেন তবে একটি মন্তব্য যুক্ত করে যা আশা করেন তা বর্ণনা করুন।

Comments

ধন্যবাদ! বুঝতে পারেনি যে আপনাকে <ডিআইআর> এর ভিতরে <hr> অন্তর্ভুক্ত করতে হবে। অস্বাভাবিক.

— কাইল কার্লসন

আমি ধরে নিচ্ছি যে বিগত দু'বছরের কোনও এক সময় বুটস্ট্র্যাপ থেকে স্প্যান 12 সরিয়ে দেওয়া হয়েছে কারণ আমার কাছে তা নেই তবে আমার দেহের সামগ্রী এবং অনুভূমিক নিয়ম উভয়ই আমার জন্য কাজ করেছে row

— কেসি

ঠিক border-color: #EEEEEE -moz-use-text-color #FFFFFF;শুধুমাত্র সঙ্গেborder-color: #EEEEEE;

— Slowaways

স্প্যান 12 এর পরিবর্তে কর্ন-

— এসএম

আপনার কোডের এই অংশটি ( border-width: 1px 0;) একটি 2pxঅনুভূমিক রেখার কারণ ! অনুভূমিক রেখাটি border-width: 1px 0 0 0;তৈরি করতে আপনার এটিকে পরিবর্তন করা উচিত 1px।

— র‌্যাম

Answer 2

লেখার বদলে

<hr>

লিখুন

<hr class="col-xs-12">

এবং এটি স্বাভাবিক হিসাবে পুরো প্রস্থ প্রদর্শন করবে।

Comments

<div class="w-100"><hr></div>

— ড্রাগজমালা

এটি বুটস্ট্র্যাপের জন্য সর্বাধিক মার্জিত সমাধান, আপনাকে ধন্যবাদ!

— ক্রিস্টোফার বেলস

<hr class="w-100">প্রস্থ নির্ধারণ করার জন্য এটি আরও স্ব-স্পষ্ট পদ্ধতি বলে মনে হচ্ছে।

— রোববেনক্লেন

Answer 3

আমি এইচআরআর ব্যাকগ্রাউন্ড-কালারকে ব্ল্যাক এ সেট করে সমাধান করেছি:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />

Comments

এটি হ্যাকের মতো আরও সমস্যার সমাধান করছে না ... একটি ইনলাইন স্টাইলের চেয়ে বুটস্ট্র্যাপ স্টাইলিংকে ওভার রাইড করার আরও অনেক ভাল উপায় রয়েছে।

— অয়নিকবার্গে

দয়া করে @ জ্যাঞ্জোবার্গারটি বিস্তারিতভাবে বর্ণনা করুন এবং আপনার সমাধানটি ভাগ করুন।

— জেমস কে

আমার মনে হয় @ জাঙ্গোবার্গার বেশিরভাগ ইনলাইন স্টাইল সম্পর্কে অভিযোগ করছেন ining আপনি এই স্টাইলটি কোনও ক্লাসে রাখতে এবং এখানে ক্লাসের নাম নির্ধারণ করতে পারতেন। আমি নিজের ব্যবহারের জন্য আপনার সমাধানটিকে সেভাবেই সংশোধন করেছি, তাই আপনাকে ধন্যবাদ!

— dreamerkumar

সম্মত - এটি একটি মার্জিত প্রতিকার :)

— জেমস কে

পুরোপুরি কাজ করে! আমি বুটস্ট্র্যাপ ব্যবহার করছি এবং কোনওভাবে আমার <hr> অস্বাভাবিক ছিল - এটি স্বচ্ছ এবং স্পষ্টভাবে দেখা যায়নি।

Answer 4

কারণ বুটস্ট্র্যাপ এর ডিফল্ট সিএসএস জন্য <hr />হয় ::

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

এটি সেই দুটি লাইনের মধ্যে 40px ব্যবধান তৈরি করে

সুতরাং আপনি যদি <hr />আপনার পৃষ্ঠায় কোনও নির্দিষ্ট মার্জিন স্টাইল পরিবর্তন করতে চান তবে আপনি এই জাতীয় কিছু চেষ্টা করতে পারেন ::

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

আপনি যদি <hr /> নিজের পৃষ্ঠায় রঙের বা সীমানার ধরণ বা বেধের মতো কোনও বিশেষের চেহারা / অন্যান্য স্টাইল পরিবর্তন করতে চান তবে আপনি এর মতো কিছু চেষ্টা করতে পারেন:

<hr style="border-top: 1px dotted #000000 !important; " />

<hr />আপনার পৃষ্ঠায় সবার জন্য

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>

Answer 5

ডিফল্টরূপে, hrটুইটার বুটস্ট্র্যাপ সিএসএস ফাইলের উপাদানটির শীর্ষ এবং নীচের প্রান্ত থাকে 18px। এটাই ব্যবধান সৃষ্টি করে। যদি আপনি ফাঁকটি আরও ছোট করতে চান তবে আপনাকে hrউপাদানটির মার্জিন সম্পত্তি সামঞ্জস্য করতে হবে ।

আপনার উদাহরণে, এর মতো কিছু করুন:

.container hr {
margin: 2px 0;
}

Answer 6

আমি মনে করি যে আমরা সীমানা রঙ যুক্ত করলে এটি আরও ভাল লাগবে: নীচের মত স্বচ্ছ:

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

যদি আপনি সীমানাকে স্বচ্ছ না রাখেন তবে এটি সাদা হবে এবং আমি মনে করি না যে এটি সর্বদা ভাল।

Answer 7

আমি এইভাবে ইনলাইন স্টাইলিং সম্পাদনা করে এইচআরট্যাগটি কাস্টমাইজ করতে সক্ষম হয়েছি:

<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
 </div>

এইচআরটিগ এখন আরও ঘন এবং আরও দৃশ্যমান; এটি একটি গা gray় ধূসর বর্ণও। বুটস্ট্র্যাপ কোডটি আসলে খুব নমনীয়। স্নিপেট যেমন উপরে দেখায়, আপনি ইনলাইন স্টাইলিং বা আপনার নিজস্ব কাস্টম কোড ব্যবহার করতে পারেন। আশা করি এটি কাউকে সাহায্য করবে।

Answer 8

আপনি এর মধ্যে একটি চাইতে পারেন, তাই বুটস্ট্র্যাপ লেআউটের সাথে সঙ্গতিপূর্ণ:

<div class="col-xs-12">
    <hr >
</div>

<!-- or -->

<div class="col-xs-12">
    <hr style="border-style: dashed; border-top-width: 2px;">
</div>

<!-- or -->

<div class="col-xs-12">
    <hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>

ছাড়া একটি DIVগ্রিড উপাদান অন্তর্ভুক্ত, বিভিন্ন ডিভাইস মে ব্রেক বিন্যাস।