বোতামের ভুল অবস্থানের সাথে 3 প্যানেল শিরোনাম wrong

117

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

কোড: http://bootply.com/82631

শিরোনাম, প্যানেল শিরোনাম বা বোতামগুলিতে আমার সিএসএস অনুপস্থিত থাকা উচিত?

css twitter-bootstrap twitter-bootstrap-3

— Dede থেকে
সূত্র

175

আমি clearfixক্লাসের <div>সাথে panel-headingক্লাস যুক্ত করে শুরু করব । তারপর, উভয় যোগ panel-titleএবং pull-leftকরতে H4ট্যাগ। তারপরে padding-topপ্রয়োজনীয় হিসাবে যুক্ত করুন ।

এখানে সম্পূর্ণ কোড:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827

— OregonJeff
সূত্র

এটি কাজ করে, কেবল সমস্যাটি হ'ল প্যানেল শিরোনামটি ডিভের শীর্ষে টানা যায় এবং বিটিএন-গ্রুপটি উল্লম্বভাবে সারিবদ্ধ হয়

— নুনো ফুর্তাদো

9

অথবা শুধু অপসারণ .panel-titleথেকে <h4>এবং আপনি প্যাডিং প্রয়োজন হবে না।

— কাওয়

153

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

<div class="panel-heading">
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <h4>Panel header</h4>
</div>

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

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

সঠিক এবং ভুল অর্ডার এবং প্রভাবগুলির উদাহরণ: http://www.bootply.com/HkDlNIKv9g

— getsaf
সূত্র

আপনি যদি এইচ 4 আকারের পছন্দটি পছন্দ করেন না <h4> <small> প্যানেল শিরোনাম </

— smar

প্যানেল-শিরোনামের ভিতরে আমার বোতামটি কেন ফিট করে না তা আমি বুঝতে পারি না। প্যানেল-শিরোনামের প্যাডিংয়ের সাহায্যে বোতামটি নীচে চাপ দেওয়া হয় এবং প্যানেল-শিরোনামের উচ্চতা বাড়ায় না। আমি কি ভুল করছি? (সম্পাদনা করুন: দৃশ্যত এটি এইচ 4 এ ক্লাস যুক্ত করার কারণে হয়েছিল ... তবে এখনও শিরোনামটি খুব দীর্ঘ))

— নট

1

আমাকে প্যানেল-শিরোনামে ক্লিয়ারফিক্স যুক্ত করতে হয়েছিল এবং উপরের উত্তরের মতো প্যাডিং যুক্ত করতে হয়েছিল। আপনি কি একটি কাজের নমুনা / ডেমো বানাতে পারেন?

— Nate

2

নেট, এখানে সঠিক বনাম ভুল ক্রমের একটি নমুনা। bootply.com/HkDlNIKv9g

— getaf

1

আমি মনে করি বিটিএন-এক্স এর সাথে বিটিএন-এসএম ক্লাসটি পরিবর্তন করা উচিত। এটি আরও ভাল ফিট করে

— ইলগালা

40

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

এখানে একটি ঠিক আছে, কেবল এটি আপনার কোড দিয়ে প্রতিস্থাপন করুন।

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

12/22/2015-এ সম্পাদিত - বিভাগের শিরোনামে .cararfix যোগ করা হয়েছে

— andre3wap
সূত্র

3

যদি আপনি প্যানেল-শিরোনাম পরিবর্তে অন্য খালি div যুক্ত করা clearfix ক্লাস যোগ কাজ করা উচিত

— escapedcat

10

আমি শিরোনামের ভিতরে বাটন গ্রুপটি রেখেছি এবং তারপরে নীচে একটি ক্লিয়ারফিক্স যুক্ত করেছি।

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>

— জনাথন
সূত্র

1

আরো মার্জিত: <div class = "প্যানেল-শিরোনাম clearfix">;)

— Marwen Trabelsi

8

এভাবে btn-groupভিতরে রাখার চেষ্টা করুন H4..

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

— জিম্বাবুয়ে
সূত্র

না এটি "ভাল অনুশীলন" নয়, তবে এটি মূল প্রশ্নের উত্তর দিয়েছে। আমি সেরা অনুশীলন অনুযায়ী উত্তর আপডেট।

— জিম

6

আপনি অংশ ঠিক আছে। সঙ্গে <b>title</b>এটা জরিমানা দেখায়, কিন্তু আমি ব্যবহার করতে চান সেটি <h4>।

আমি রেখেছি <h4 style="display: inline;">এবং এটি কাজ seams।

এখন, আমি কেবল কিছু ভার্চিবল প্রান্তিককরণ যুক্ত করতে হবে।

— Dede থেকে
সূত্র

1

inline-blockভাল.

— Dede থেকে

6

এই ক্ষেত্রে আপনার .clearfixভাসমান উপাদানগুলির সাথে ধারকটির শেষে যুক্ত করা উচিত ।

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

— sargonpiraev
সূত্র

1

.প্যানেল-শিরোনাম সহায়তাগুলিতে একটি অতিরিক্ত ক্লাস ব্যবহার করে আমি পেয়েছি।

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

এবং তারপরে এই কম কোডটি ব্যবহার করে:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

— জন জয়স
সূত্র

0

h4উপাদান একটি ব্লক হিসেবে প্রদর্শিত হয়। এটিতে একটি সীমানা যুক্ত করুন এবং আপনি কী চলছে তা দেখতে পাবেন। আপনি যদি এর ডানদিকে কিছু ভাসা করতে চান তবে আপনার কাছে অনেকগুলি বিকল্প রয়েছে:

ব্লক (এইচ 4) উপাদানটির আগে ভাসমান আইটেমগুলি রাখুন ।
পাশাপাশি h4 উপাদানটি ভাসাও।
H4 উপাদান ইনলাইন প্রদর্শন করুন।

উভয় ক্ষেত্রেই, clearfixআপনার বোতামগুলির জন্য সঠিক প্যাডিং পেতে আপনার ধারক উপাদানটিতে ক্লাস যুক্ত করা উচিত ।

আপনি panel-titleএইচ 4 এলিমেন্টে ক্লাস যুক্ত করতে বা প্যাডিং সামঞ্জস্য করতেও পারেন ।

— mrdeus
সূত্র

0

অথবা এটা? সারি ক্লাস ব্যবহার করে

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>

— কানিত পি।
সূত্র