मैं बूटस्ट्रैप के लिए पूरी तरह से नया हूं, एक हफ्ते से इसके साथ काम कर रहा हूं। मैं वर्तमान में अपनी प्रेमिका को एक क्रिसमस उपहार पर काम कर रहा हूं और मैं वास्तव में फंस गया हूं।

मैं पृष्ठभूमि पर एक चित्र और एक छोटा पाठ (एक दूसरे के बगल में) रखना चाहता हूं। छवि वास्तव में इस तरह दिखती है: यहां छवि विवरण दर्ज करें यह पूरी तरह से छोड़ दिया गया है और उसके बगल में पाठ है। (छवि और पाठ के बीच थोड़ी जगह भी है और दाईं ओर स्क्रीन के पाठ और अंत के बीच भी। चित्र बाईं ओर शुरू होता है जहां स्क्रीन शुरू होती है।)

मैं यह भी चाहता हूं कि सब कुछ उत्तरदायी हो।

मैंने सब कुछ करने की कोशिश की लेकिन यह वास्तव में कभी काम नहीं किया और मैं इस मुद्दे पर 2 दिनों की तरह बर्बाद हो गया। मैं वास्तव में इसे अकेला नहीं बना सकता! कृपया सहायता कीजिए!!!

.section_1 {
  position: relative;
  color: #fff;
  background-color: #bdbdbd;
}
.picture {
  content: url(http://i.stack.imgur.com/Zlrxu.png);
  width: 50%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="section_1">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="picture">
        <div class="span2">
        </div>
        <div class="span10">
          <div class="text">
           <p>Lorem ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
1
csf 27 नवम्बर 2015, 00:01

4 जवाब

सबसे बढ़िया उत्तर

बूटस्ट्रैप में 3.x ".row-fluid" वर्ग ".row" और ".span *" वर्गों में बदलकर ".col- *" कर दिया गया है। मैंने आपके कोड में कुछ बदलाव किए हैं और इसे अपनी छवि लिंक में दिए गए व्यवहार के अनुसार बनाया है, कृपया यहां क्लिक करें प्लंकर डेमो के लिए।

HTML फ़ाइल:

<section class="section_1">
<div class="container-fluid picture">
    <div class="row ">
        <div class="col-sm-5">
          <img src="http://i.stack.imgur.com/Zlrxu.png" class="img-responsive"/>
        </div>
        <div class="col-sm-7 text"><p>Lorem ipsum</p></div>
    </div>
    </div>

CSS फ़ाइल:

.section_1 {
color: #fff;
background-color: #bdbdbd;}

.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}
1
rraman 27 नवम्बर 2015, 09:51

मुझे नहीं पता कि आप क्या अर्थ रखते हैं, लेकिन यहाँ मुझे लगता है कि आपका क्या मतलब है। JsFieldpg

:)
0
John Cena 26 नवम्बर 2015, 21:22

मैं कुछ इस तरह से करना चाहूंगा: सामान्य और मोबाइल में कुछ इस तरह से देखें: MOBILE

लेकिन वैसे भी बहुत धन्यवाद! :)

0
csf 26 नवम्बर 2015, 21:45

जब रमन के उत्तर में बूटस्ट्रैप का उपयोग किया जाता है: क्योंकि पाठ में अधिक सामग्री हो सकती है कि सिर्फ एक "लोरम इप्सम", और पाठ div की ऊँचाई छोटे स्क्रीन, आपकी छवि पर अधिक से अधिक हो जाएगी, भले ही वर्ग img- उत्तरदायी (img-fluid) हो , नीचे सफेद स्थान के साथ छोड़ दिया जाएगा। इस समस्या के समाधान के लिए आप इस सीएसएस का उपयोग img पर कर सकते हैं:

height: 100%;
width: 100%;
object-fit: cover:
object-position: 50% 50%; //for always to show image center
0
Adrian Mole 28 अक्टूबर 2019, 11:05