বুটস্ট্র্যাপ কারাউসেল চিত্রটি সঠিকভাবে প্রান্তিক হয় না

Question

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

তবে বুটস্ট্র্যাপ দ্বারা সরবরাহ করা ক্যারোসেল উদাহরণ সর্বদা সূক্ষ্মভাবে কাজ করে, উইন্ডোটির প্রস্থ নির্বিশেষে। কোড অনুসরণ করা।

কেউ কি ব্যাখ্যা করতে পারেন যে কারাউসেল কেন অন্যরকম আচরণ করছে? চিত্রের আকারের সাথে এটি করার কোনও কিছু বা বুটস্ট্র্যাপ কনফিগারটি অনুপস্থিত?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Comments

আপনার সমস্ত চিত্র একই প্রস্থ? এছাড়াও, তারা কি তাদের .span6পাত্রে প্রসারিত করে ?

— অ্যান্ড্রেস ইলিচ

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

— নাম্বি

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

— WuTheFWasThat 14'13

ইমেল ঠিকানাটি লুকিয়ে রাখা সম্ভবত একটি ভাল ধারণা হবে :)

— tgdn

Answer 1

সমাধানটি হ'ল এই সিএসএস কোডটিকে আপনার কাস্টম সিএসএস ফাইলে রাখুন:

.carousel-inner > .item > img {
  margin: 0 auto;
}

Comments

এই আমার জন্য কাজ! আমি ভেকোজ্লোভ পদ্ধতি চেষ্টা করেছি কিন্তু কাজ করে নি, এটি কাজ করে! অনেক ধন্যবাদ

— আহ-শিয়াং হান

উচ্চতা ক্যারোজেল এর, চিত্র বিভিন্ন উচ্চতা জন্য পরিবর্তন যাতে আপনি CSS একটি নির্দিষ্ট প্রস্থ নির্ধারণ করার প্রয়োজন হবে।

— কোয়ান্টামহাইভ

সুপার! আশা করা যায় এটি কেবল 'বিল্ট ইন' বিএস ক্লাস যেমন। কারাউজেল-ইমজি-সেন্টার বা শিগগিরই হবে।

— কোডফিনিটি

আমি মার্জিন চেষ্টা করবে কিন্তু আমি যোগ পাওয়া height:noneথেকে .carousel-inner > .item > imgডিফল্ট চেয়ে জন্য ভাল ফলাফল পায়height:500px

— CrandellWS

আপনার .carousel-inner > .carousel-item > img { margin: 0 auto; }বুটস্ট্র্যাপ 4 এর জন্য করা উচিত

— এক্সপেনজর

Answer 2

বুটস্ট্র্যাপ 3 দিয়ে, কেবল প্রতিক্রিয়াশীল এবং কেন্দ্রের ক্লাস যুক্ত করুন:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

এটি স্বয়ংক্রিয়ভাবে চিত্রের আকার পরিবর্তন করে এবং চিত্রটিকে কেন্দ্র করে।

সম্পাদনা করুন:

বুটস্ট্র্যাপ 4 সহ, কেবল img-fluidক্লাস যুক্ত করুন

<img class="img-fluid" src="img/....jpg">

Comments

শীর্ষে ভোট দেওয়া সমাধানগুলি কোনও উপকারের চেষ্টা করে। এটি অনেক পরিষ্কার, সহজ এবং কাজ করা is ধন্যবাদ!

— কাইল

পাতলা এবং পরিষ্কার। ধন্যবাদ

— চিফেনেন

নিখুঁত আপনাকে ধন্যবাদ. আমি শপথ করছি আমি আগে এটি গুগল করেছিলাম এবং কোনও উত্তর পাইনি, এটি সরাসরি কাজ করে worked

— চুদ 37

আমি বুটস্ট্র্যাপ 4 ব্যবহার করছি এবং img- ফ্লুড ক্লাস চিত্রগুলি কেন্দ্র করে না। তারা সব ন্যায়সঙ্গত বাম।

— মালচেডোর

@iaacp শুধু যোগ text-centerকরতে <div class="carousel-item">স্টার্ট ট্যাগ

— deanwilliammills

Answer 3

আমি একই সমস্যার মুখোমুখি হয়েছি এবং এটি সমাধান করেছি: ক্যারোসেলে নন-ইমেজ সামগ্রী সন্নিবেশ করা সম্ভব, যাতে আমরা এটি ব্যবহার করতে পারি। আপনার প্রথমে সন্নিবেশ করা উচিত div.inner-item(যেখানে আপনি কেন্দ্রের প্রান্তিককরণ করবেন) এবং তারপরে এই ডিভের ভিতরে চিত্র প্রবেশ করানো উচিত।

এখানে আমার কোড (রুবি):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

এবং আমার সিএসএস কোড (.এসএসএস):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Comments

এই সিএসএস আমার জন্য দুর্দান্ত কাজ করেছে,

— কারোসেলে

Answer 4

ভেকোজ্লোভের উত্তরটি আপনার চিত্রটি কেন্দ্র করে বুটস্ট্র্যাপ 3 এ কাজ করবে, যখন কারাউসেলটি ছোট ছোট করা হবে তখন তা ভেঙে যাবে: কারসুল দিয়ে স্কেলিং না করে চিত্রটি তার আকার ধরে রাখবে।

পরিবর্তে, শীর্ষ-স্তরের ক্যারোসেলে এটি করুন div:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

এটি পুরো কারাউসেলকে কেন্দ্র করে এবং এটি আপনার চিত্রগুলির প্রস্থের (যেমন 900 পিক্সেল বা আপনি সেট করতে চান যা কিছু) বাড়ানোর থেকে আটকাবে। যাইহোক, ক্যারোসেলটি যখন এটির সাথে কমিয়ে দেওয়া হয় তখন চিত্রগুলি এটি কমিয়ে দেওয়া হয়।

অবশ্যই আপনার স্টাইলিং তথ্যটি আপনার সিএসএস / কম ফাইলটিতে অবশ্যই রাখা উচিত।

Answer 5

বুটস্ট্র্যাপ 4 এ, আপনি mx-autoআপনার imgট্যাগে ক্লাস যুক্ত করতে পারেন ।

উদাহরণস্বরূপ, আপনার চিত্রটির প্রস্থ যদি 75% হয় তবে এটি দেখতে এই জাতীয় দেখাচ্ছে:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে অনুবাদ করবে mx-auto:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Answer 6

এটি আপনার শৈলীর সাথে কিছু করতে পারে। আমার ক্ষেত্রে, আমি পিতামাতার "আইটেম" ডিভের মধ্যে একটি লিঙ্ক ব্যবহার করছি, সুতরাং আমাকে নিম্নলিখিত বলার জন্য আমার স্টাইলশিটটি পরিবর্তন করতে হবে:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

পূর্বনির্মাণ বুস্ট্র্যাপ কোডের অধীনে:

.carousel .item > img {
  display: block;
  line-height: 1;
}

এবং আমার চিত্রটি দেখে মনে হচ্ছে:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Answer 7

আমি মনে করি আমার একটি সমাধান আছে:

আপনার ব্যক্তিগত স্টাইলের শীট পৃষ্ঠায়, আপনার চিত্রের মাত্রাগুলির সাথে মিলের জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করুন ।

উপরের ডিভের উপর একটি অতিরিক্ত পৃথক "শ্রেণি" তৈরি করুন যা স্প্যানগুলির সাথে স্থানটি বরাদ্দ করে ... (নীচে দেখানো হয়েছে)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

আপনার নিজস্ব স্টাইল শীটে বুটস্ট্র্যাপ সিএসএস স্পর্শ না করে আপনার মূল পিক্সের প্রস্থ এবং উচ্চতা মেলাতে "ক্যারোসেল" (বা আপনি যে লেবেল চয়ন করুন) কল করুন!

.carousel       {
            width: 320px;
            height: 200px;

}

সুতরাং আমার ক্ষেত্রে, আমি ক্যারোসেলের সাথে ছোট 320x200 চিত্র ব্যবহার করছি। বুটস্ট্র্যাপ সিএসএসে সম্ভবত পূর্বনির্ধারিত মাত্রা রয়েছে তবে আমি এটি পরিবর্তন করতে পছন্দ করি না তাই আমি ভবিষ্যতের প্রকাশের সাথে বর্তমান থাকার চেষ্টা করতে পারি। আশা করি এটি সহায়তা করবে ~~

Answer 8

আমি আপনাকে একই সমস্যা সম্মুখীন হয়। @ থুলিহার ইঙ্গিতের ভিত্তিতে, নিম্নলিখিত কোডগুলি আমার সমস্যাগুলি সমাধান করেছে।

ইন htmlফাইল নিচের নমুনা হিসাবে পরিবর্তন করুন:

<img class="img-responsive center-block" src=".....png" alt="Third slide">

ইন carousel.css, ক্লাসটি সংশোধন করুন:

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Answer 9

এটা চেষ্টা কর

    .item img{
      max-height: 300px;
      margin: auto;
    }

Comments

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

— রেনি ভোগ

Answer 10

আপনার চিত্রগুলির স্প্যান 6 হিসাবে হুবহু 460px প্রস্থ রয়েছে? আমার ক্ষেত্রে, বিভিন্ন চিত্রের আকার সহ, আমি আমার চিত্রগুলিতে উচ্চতার বৈশিষ্ট্য রেখেছি তা নিশ্চিত হতে যে তারা সমস্ত উচ্চতা একই এবং কারওসেল চিত্রগুলির মধ্যে আকার পরিবর্তন করে না।

আপনার ক্ষেত্রে, একটি উচ্চতা সেট করার চেষ্টা করুন যাতে আপনার উচ্চতা এবং অভ্যন্তরের ডিভের দৈর্ঘ্যের মধ্যে এই উচ্চতা এবং প্রস্থের অনুপাত আপনার চিত্রগুলির অনুপাতের মতই হয়

Comments

এটা সাহায্য করে না। আপনি কি মনে করেন ইমেজ ফর্ম্যাটটি গুরুত্বপূর্ণ? বুটস্ট্র্যাপ উদাহরণটি জেপিইজি ফাইলগুলি ব্যবহার করে, যেখানে আমি পিএনজি ফাইল ব্যবহার করছি। যে কোন পার্থক্য করতে না.

— নাম্বি

Answer 11

@ আর্ট এল। রিচার্ডসের সমাধান কার্যকর হয়নি। এখন bootstrap.css এ, মূল কোডটি এর মতো হয়ে গেছে।

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530 এর কোড বুটস্ট্র্যাপের তরল বৈশিষ্ট্যটি ভেঙে দেবে।

আমার কাছে ভাল সমাধান নেই তবে আমি এটি ঠিক করেছি। আমি খুব যত্ন সহকারে বুটস্ট্র্যাপের কারাউসেলের উদাহরণটি পর্যবেক্ষণ করেছি http://twitter.github.com/bootstrap/javascript.html#carousel ।

আমি জানতে পারি যে ইমগের প্রস্থটি গ্রিডের প্রস্থের চেয়ে বড় হতে হবে। ইন span9, প্রস্থ 870px পর্যন্ত হয়, সুতরাং আপনাকে 870px এর চেয়ে বড় চিত্র প্রস্তুত করতে হবে। আপনার যদি ইমগের বাইরে আরও ধারক থাকে, যেমন সমস্ত ধারকটির সীমানা বা মার্জিন কিছু থাকে তবে আপনি ছোট প্রস্থ সহ চিত্র ব্যবহার করতে পারেন।

Answer 12

কারাউসেলের জন্য, আমি বিশ্বাস করি যে সমস্ত চিত্র একই উচ্চতা এবং প্রস্থের হতে হবে।

এছাড়াও, আপনি যখন বুটস্ট্র্যাপ থেকে ভাসমান পৃষ্ঠায় ফিরে যান, আমি নিশ্চিত যে স্প্যান 16 = 940px। এটি মনে রেখে, আমি মনে করি আমরা ধরে নিতে পারি যে আপনার যদি একটি থাকে

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

সুতরাং হ্যাঁ, সারিগুলির মধ্যে স্প্যানগুলির স্থান নির্ধারণ করার সময় আপনাকে সতর্কতা অবলম্বন করতে হবে কারণ যদি চিত্রের প্রস্থটি বড় হয় তবে এটি আপনার ডিভটি পরবর্তী "সারিতে" প্রেরণ করবে এবং এটি মজাদার নয়: পি

লিঙ্ক 1

Answer 13

এটির সিএসএস প্যারেন্ট ডিভ ক্লাসে carোকান যেখানে আপনার কারাউসেল রয়েছে।

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

সিএসএস

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}