html tutorial ডিভের চেয়ে বড় আকারের বুটস্ট্র্যাপ কলামে কোনও পটভূমি সেট করা সম্ভব?



html tags (3)

এই প্রশ্নের ইতিমধ্যে এখানে একটি উত্তর আছে:

আমি পরবর্তী উদাহরণ কোড করা প্রয়োজন:

আমি বুটস্ট্র্যাপ ব্যবহার করে সমস্ত ওয়েবসাইট কোডিং করছি এবং এই বিভাগের কোডটি হ'ল:

`<div class="bg_blue">
        <div class="container">
            <!-- Example row of columns -->
            <div class="row">
                <div class="col-md-6">
                    <div id="login-form-box" class="form-box">
                        <div id="login-form-info" class="form-info">
                            <?php if (isset($content['info']) && !empty($content['info'])) {
                            echo $content['info'];
                            }
                            ?>
                        </div>
                        <?php if (isset($error_message)) {
                        echo '<div id="login-form-info" class="form-error">'.$error_message.'</div>';
                        }
                        ?>
                        <form id="login-form" class="form" action="<?php echo api_get_path(WEB_PATH)?>index.php" method="post">
                            <div>
                                <label for="login"><?php echo custompages_get_lang('User');?></label>
                                <input name="login" type="text" /><br />
                                <label for="password"><?php echo custompages_get_lang('Password');?></label>
                                <input name="password" type="password" /><br />
                            </div>
                        </form>
                        <div id="login-form-submit" class="form-submit" onclick="document.forms['login-form'].submit();">
                            <span><?php echo custompages_get_lang('LoginEnter');?></span>
                            </div> <!-- #form-submit -->
                            <div id="links">
                                <?php if (api_get_setting('allow_registration') === 'true') { ?>
                                <a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/inscription.php?language=<?php echo api_get_interface_language(); ?>">
                                    <?php echo custompages_get_lang('Registration')?>
                                </a><br />
                                <?php } ?>
                                <a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/lostPassword.php?language=<?php echo api_get_interface_language(); ?>">
                                    <?php echo custompages_get_lang('LostPassword')?>
                                </a>
                            </div>
                        </div>
                    </div>
                <div class="col-md-6">
                    <!-- <img class="img" src="<?php echo api_get_path(WEB_PATH)?>/custompages/images/bgimage.png" alt="Background" /> -->
                </div>
            </div> <!-- /row -->
        </div><!-- /container -->
    </div>`

সমস্যাটি হ'ল আমি দ্বিতীয় কলামটিতে চিত্রের পটভূমি সেট করতে পারি না যা আকার পরিবর্তন করে এবং ডানদিকে কলাম-এমডি -6 সহ পুরোটি কভার করে।

এখানে একটি ছোট স্কেচ:

https://src-bin.com


Answer #1

অবশেষে এটি "ধারক" ডিভটি সরিয়ে দিয়েছিলাম।

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

http://www.thalescampusvirtual.com/index.php


Answer #2

আপনি যদি কেবলমাত্র মাঝারি পর্দার আকারগুলিকে লক্ষ্য করতে চান তবে আপনি নিম্নলিখিত পদ্ধতিতে এটি করতে পারেন। width: 120% আপনার img উপাদানগুলিতে width: 120% এবং এটি উপচে পড়বে এবং বাম দিকে পুরো আকারটি গ্রহণ করবে।

কাজ স্নিপেট

.img {
  width: 120%;
}

.col-md-6 {
  background-color: green;
}
<html>

<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="bg_blue">
    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-6">
          <div id="login-form-box" class="form-box">
            <div id="login-form-info" class="form-info">

            </div>

            <form id="login-form" class="form" action="" method="post">
              <div>
                <label for="login"></label>
                <input name="login" type="text" /><br />
                <label for="password"></label>
                <input name="password" type="password" /><br />
              </div>
            </form>
            <div id="login-form-submit" class="form-submit" onclick="document.forms['login-form'].submit();">
              <span></span>
            </div>
            <!-- #form-submit -->
            <div id="links">

              <a href="">

              </a><br />

              <a href="">

              </a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <img class="img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="Background" />
        </div>
      </div>
      <!-- /row -->
    </div>
    <!-- /container -->
  </div>
</body>

</html>

বিঃদ্রঃ:

আপনি যদি সমস্ত স্ক্রিন মাপের মিডিয়া টার্গেট করতে চান তবে কেবল col-lg-* col-xs-* col-sm-* অর্থাৎ বিভিন্ন প্রতিক্রিয়াশীল বুটস্ট্র্যাপ ক্লাস ব্যবহার করুন।

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


Answer #3

আপডেট হয়েছে 2018

বুটস্ট্র্যাপ 4 , ধারণাটি এখনও একই: https://www.codeply.com/go/ffaQgse2SU

আমি এটিতে অনুরূপ প্রশ্নের উত্তর দিয়েছি, তবে background-image কারণ থেকে কিছুটা আলাদা। আমি খুঁজে পেয়েছি সবচেয়ে ভাল উপায় একটি সিএসএস সিউডো উপাদান ব্যবহার করে এটি ডান col-md-6 সাথে সামঞ্জস্য করে এবং তাই প্রতিক্রিয়াশীলভাবে কাজ করে।

বুটস্ট্র্যাপ 3 ডেমো: http://www.codeply.com/go/rWOGi4LrU1

.right {
    z-index: 0;
    color: #fff;
}

.right:before {
    background-image:url(..);
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */
    top: -15px;
    left: -15px;
    bottom: -15px;
}

Demo

এছাড়াও দেখুন: বিভিন্ন পটভূমির রঙের সাথে দুটি কলাম পান যা স্ক্রিন প্রান্তে প্রসারিত





twitter-bootstrap