手机上的Bootsrap行不起作用

时间:2017-07-11 16:09:50

标签: html twitter-bootstrap responsive-design

我设计了一个带有“mulit”行的小页面。这是标记。

 <div class="row">
        <div class="col-md-6 light col">
                 <h1 class="text-center">Our Services</h1>
            <div class="container row">
                <div class="col-md-6">
                    <img class="icon icons8-Customer-Support" width="48" height="48" src="data:image/png;base64,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"><br/>
                    <h4>Beratung</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                </div>
                <div class="col-md-6">
                    <img class="icon icons8-Design" width="48" height="48" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEHElEQVRoQ+2YW0hUQRiA/1nXXNcLi2Qh3rIiRMVWeispLYigLHouUSmKiF4iy4cIJQlStrdKKsgefA6khyJyTTcIIzC7YS5mKSqk4oI31svEbA4dj2fm/GeOFwQXfPHMmfm++f/5z38OgQ3+IxucHzYF1juCliNwuGmiHIAcajkTV7He8Gx9SwKL8E8XwRtXQ2KgstIL8/N+QkgfdTgq0urrO2UbhRbQwfM5V1RCA+9hC1BKxyEqqlgmgRIQwMPc7BwMBQc6e2pzC+ym03P/O2/8yJ+7Oe/bj2rnMpMwFZDB//zUDTMTU+DZvrWzpzZPWYLBE0r9AMTjDoUCuYE3hVgJqQAG3hUXC1nebHBGO5XSSQvPoY0kAKAz1edbtklCARE8X6T/e29k9xfhldKJPgLvaEz+40Dqgz3gIInaXddLUIBQms8XORvan6GAGTyfgJ0BZ7QzAm81nRg8LIAfADxjMXnd7ekNKSIJBg8OR5HRYV4mgIXXSnB4bDpp4fk8QonRkdc5HYHrokpkS0C78xp4aToZwYskKGU7D0Wniw8InwW2UqjnwxeYmZwGPbwonWTweglKCDWDlz6JMak0NjwCo/3DSw6yKJ0w8Fxi1JX/sT3z4XnZzvOxSmVU9tDSVyc2dt9CS3PdZMlBdmARD7xI2pALIG0hUAJsECYSeihendj/dy90gW/yGMRDCMH+L+ex8OhmTkViLeDRAiqRWO2dR6eQNu7YSKwVvKUIcBEzibWEVxKQpZMV+EmSCDXupub60pJTmNMtGmPaTotu1EfCKvxV9ysIOvLZ9EpdrNIZ0MtwCRvwSl2slkM5AnySusaGW5dmbtRg6jxLG83OK3Wx+k20JWClPdDDMxCDXspyOikL2IVnAka91PjwWEtXVdYR7MFWElgJeKP2gzeCKbsy0RKWBVYbHvtSpFSF1hAeXZ3QEbACDwChelfDvZfRpTWyXJa90fF0Skj2fOu948219SCzCs9bYrO2g0EZvT/w6uRwRsFObzbExruF1ck0Aqrw2N6JjdO+P/DqNBT8zeH5VIYSUgG78FYkjKoS+2Sj+y2TEApQP+yAH9AGFNIRNdn0TQqTTmbrUArP/GfjylGtBG2LLoc5UgXBcAoswJKvZrqFTOHtRILfawTProkj8HZLIwApg3naLZFAw9uREMHLBVpj+oBAZmRhYwnL8CoSMnihwP3q3MKMpKn2E3sH/2fLUglleCsSZvBCgdvXCp68+Jxx7ubxLlgm0RN2A4GTVj59iA6n7GBj4IUCVy7uD3b0Je9iAyIS+YO/gNDWyN/8bCsphj6zioG9biSBhRcKlJUVjSe6wiPbEqZbk+LDjZervwawQCrjtBJW4KWHWAXEzj1MglJSpK/zZnOathJmE6z39U2BzQjY3IG/DRn6T235U8YAAAAASUVORK5CYII="><br/>
                    <h4>Design</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                </div>
            </div>
            <div class="container row">
                <div class="col-md-6">
                    <img class="icon icons8-Source-Code" width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEL0lEQVRoQ+2YPWzbVhDH/0e5ViEvHTIEWeIuhTtVXgo3S+1MhijKypCgW+0tU+MOTU15iDqYdNPF2bLF2Yp2sEOKQjY5QJBmi7d6a7IEHToUKCxUrsQrHmkair749ezWhrjyveP9737v7h0JF+ShC6IDYyH/t0yOMzLOyHEESnr9bkdxnzsbxRcygvKfoHWz+tNkq5X7g4m+sg11+9wKKa05i1D4CdqdS9b9pb/OrxC9tg3CZcsoLsoQIWycOVoBVq5Cd2sb6sNzKyTAqv0PXa3/oP5+boVouvOQiKdlYhULrXK18UGndbjTIfq6bqj7SSIpsPq7NfWGFXw3Cqvimj1PRPcy2akbu9WFP6N8K/IZ0SrOLoB8ZjKXj2q81wGBFRPqnTaujMLKC9pRUwSrYRvqijQhpYqzBcZymzCfNBvCGQ8rIG+Z6lyYc4WKk59g7IGwbRnqatj60IxoFWeZgEeu6y7UNrW9MIPD3zNpev0twN/bZnErih2BmKIoDQZWwhrnSCFxDIU5pq3X5+DyizCseu1EDeRQIV5qwQ2AHkdJbZiQYzznomDVd7YE2uAv26CFYWgPFCIOm9tqvgL4mWUWl8OcDH8fYIUHtqluhq/vXyGKDTE+UbK52UHFpk+IJ+Ko2WBmymSn5pNWqG5XBFbE/Auz+7FtagdJhByX/z0iYstQZ3tt9AkpiXsQqKxkc9MyRHjVqlLbBGPRNov5JCKCPcekvGbCTm9ZfkdIqeJUwVhNW2YHMH7AjO2kWHXb6yrLW5ahVoN3J0KC6sBMN2yzIJqflMcvGniVBqu+SqbXy0S8012WPSEnH4tQr+OqE1gRqGwZ6kzcvaPWB4FvA7Oikp26kFLFEYf7x24MZAgaKMQ/kH4Hl4mWptszRMqvMrHyfB2GVhAh77CD74xqPHGi6dvDFzKx6mrUDwYe9hMx/hi6pExOfZi2/AqsGLxrG8W1OAEYttbvcYe/gfGkt1EP7OyaXtsXjUeZzC0kFXOCFdFn9kbhZVoh3Y16UD8aekWJOw/0l0hnjYAVyyzMAMRphXjzEPP0sNvG6EtjjHmgrwnqzksm3pOBVZR56FSu8QXd+SgDHECha2mxSn2NDyIc1dA7l0TdEYf7jm0WrqTBKs48FDohCge91IbMA91CSgIrYN821dtJz0bceSiSEE+Mfyv+fNg8EDhc+Ma5nJnAW2b3etLROMk8FFmIPw80dzuE1VE/IDS9tgrQt2mw8n8HKdVMNleOWv4jC4mKiAyson6re51UIQFWxChYm+rTJA4l3SNVSHHduU0u7r2fPbz6c/XWUVKnkuyTKqRUqT1lptdpqlUSEWKPNCECq4n3+A1cWjprrKQKEVgpLt/PZpuXzhorqULU9do1xcWnUX+HJkVo2D5paMl2LK69sZC4ETvt9eOMnHaE49q/MBn5F/XtRFGQSNloAAAAAElFTkSuQmCC"><br/>
                    <h4>Entwicklung</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                </div>
                <div class="col-md-6">
                    <img class="icon icons8-Paper-Plane" width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADjUlEQVRoQ+2ZTUwTQRiGv2nBrda/CEgwBhQRIRUx/hRPtpFwg6MnNHiAkJiYoJ6N1ZsnxQtHDxovehK42EOhHkQIGtGgVgkgBASCsUEMFNg135pt1u3+zOxsC03aS5PtdOd553u/d6ZbAln+IlnODzkBm13BXAVyFbBYgftDa0FR3Gi+Wedp0xu6ZS30cHAtIMJGCIAERYC7N/zC7awQoAZXgN0uqL52Rvi8pQVowSdn4lB2YA8yf+nwC1VGTtt0C2nBV1bXYSS2AP6aEplZkuDO9TohtOUE6FllbnEZosNT0BSoAI+QJzOb2Qc/z3gF9MAR5H1sXl75iw3HkvBW9smoACNwhHj5elyGv9zog+ICb9ItVvbJiAAzcPT7s3AM5hZ/p8DT2CetAszAcWL0e3f/mPzeGDgCtZX7tX1qmj7KYMd7wApczsXxn9AdHYPVxLoRvGX6OC6ABhwnxZR59XZanv/E0SJoClboJqRV+jgmgBYc/R4emISR2LwlPE36cAugBceJfi2twHO5WZfleYv37YBLjT51XP5XBZr0sS2ABRwnwSMBJg36nQaeNn2YBbCC4wSDH2YhPDCRXF1hm1s3LjVNQJU+1ALsgOPNu/u+wcjXBVZ46vSxFGAXHJv1Se9o0u/KRAZZn5JAtOljKaDzTaJFBKmLENium3M6F7FJH/eMJv3OCs+SPpYCcEDn0OpxUYKnBKDGSgQexnr6x1KGmWW9djBL+lAJwEGPxiVPfCHRBQBXjETgYWzo4w8ueNb0oRagDNSzlHIY+z4bT4G3ynqdxWBKH2YBWkuh3zHf40srTsAzp48tAYqlwpHJ3ujw9AVlc1IroMx67vSxLQC/WNgaCRJCIloKu/B20odLAH65qK1P0gqgzXon0odbQGFbpI8ACdjIesfsgzey/YOmsDUSIoTIT8skCab8DWcP1h/KAzdhvqet9OGvgKoPiNcb9VZWnT+8lzxoqsivp9n4FAA7m5e6hLYroO4DT7Xvk9vjeTdxdVczzcanBmA9+2j9xyVA7gPiKvHWnhITeTtPz7STP2Ybn1Obl2MVwD7ILyg6J5SXdky07055+Gp1luK1D1cT/7NQ5KSrtKx07lb5C53VlS+ZWYrXPtwCjKD1ruucpbjShzuFWOCTfaE6njthn4xWQBGhWMrtgntGf1qwLA5XCrFMlK6xOQHpWlna++YqQLtS6RqX9RX4C6oUwkAbcv6jAAAAAElFTkSuQmCC"><br/>
                    <h4>Hositng</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                </div>
            </div>
        </div>
         <div class="col-md-6 dark col">
                <h1 class="text-center">Contact us Today</h1>
                 <form>
                    <div class="form-group">
                        <input type="text" name="name" id="name" class="form-control" placeholder="Vorname"/>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" id="email" class="form-control" placeholder="Email"/>
                     </div>
                     <div class="form-group">
                         <label for="messge">MESSAGE</label>
                         <textarea class="form-control" rows="7"></textarea>
                     </div>
                    <button class="button center-block" type="submit" style="background: transparent;">Send MEssage</button> 
                 </form>
             </div>
    </div>

但响应式设计不起作用。它看起来像这样: enter image description here

页面上的其他行工作正常。请帮助我。 谢谢!

2 个答案:

答案 0 :(得分:2)

使用正确的Bootstrap网格格式可以缓解此问题。默认情况下.container具有固定宽度;因此,对于嵌套网格,您可以考虑更改为.container-fluid

您还将.container.row合并,这是不恰当的。正确嵌套网格格式可以解决您的所有问题。

&#13;
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-md-6 light col">
		<h1 class="text-center">Our Services</h1>

		<div class="container-fluid">
			<div class="row">
				<div class="col-md-6">
					<img class="icon icons8-Customer-Support" width="48" height="48" src="data:image/png;base64,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"><br/>
					<h4>Beratung</h4>
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
				</div>

				<div class="col-md-6">
					<img class="icon icons8-Design" width="48" height="48" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEHElEQVRoQ+2YW0hUQRiA/1nXXNcLi2Qh3rIiRMVWeispLYigLHouUSmKiF4iy4cIJQlStrdKKsgefA6khyJyTTcIIzC7YS5mKSqk4oI31svEbA4dj2fm/GeOFwQXfPHMmfm++f/5z38OgQ3+IxucHzYF1juCliNwuGmiHIAcajkTV7He8Gx9SwKL8E8XwRtXQ2KgstIL8/N+QkgfdTgq0urrO2UbhRbQwfM5V1RCA+9hC1BKxyEqqlgmgRIQwMPc7BwMBQc6e2pzC+ym03P/O2/8yJ+7Oe/bj2rnMpMwFZDB//zUDTMTU+DZvrWzpzZPWYLBE0r9AMTjDoUCuYE3hVgJqQAG3hUXC1nebHBGO5XSSQvPoY0kAKAz1edbtklCARE8X6T/e29k9xfhldKJPgLvaEz+40Dqgz3gIInaXddLUIBQms8XORvan6GAGTyfgJ0BZ7QzAm81nRg8LIAfADxjMXnd7ekNKSIJBg8OR5HRYV4mgIXXSnB4bDpp4fk8QonRkdc5HYHrokpkS0C78xp4aToZwYskKGU7D0Wniw8InwW2UqjnwxeYmZwGPbwonWTweglKCDWDlz6JMak0NjwCo/3DSw6yKJ0w8Fxi1JX/sT3z4XnZzvOxSmVU9tDSVyc2dt9CS3PdZMlBdmARD7xI2pALIG0hUAJsECYSeihendj/dy90gW/yGMRDCMH+L+ex8OhmTkViLeDRAiqRWO2dR6eQNu7YSKwVvKUIcBEzibWEVxKQpZMV+EmSCDXupub60pJTmNMtGmPaTotu1EfCKvxV9ysIOvLZ9EpdrNIZ0MtwCRvwSl2slkM5AnySusaGW5dmbtRg6jxLG83OK3Wx+k20JWClPdDDMxCDXspyOikL2IVnAka91PjwWEtXVdYR7MFWElgJeKP2gzeCKbsy0RKWBVYbHvtSpFSF1hAeXZ3QEbACDwChelfDvZfRpTWyXJa90fF0Skj2fOu948219SCzCs9bYrO2g0EZvT/w6uRwRsFObzbExruF1ck0Aqrw2N6JjdO+P/DqNBT8zeH5VIYSUgG78FYkjKoS+2Sj+y2TEApQP+yAH9AGFNIRNdn0TQqTTmbrUArP/GfjylGtBG2LLoc5UgXBcAoswJKvZrqFTOHtRILfawTProkj8HZLIwApg3naLZFAw9uREMHLBVpj+oBAZmRhYwnL8CoSMnihwP3q3MKMpKn2E3sH/2fLUglleCsSZvBCgdvXCp68+Jxx7ubxLlgm0RN2A4GTVj59iA6n7GBj4IUCVy7uD3b0Je9iAyIS+YO/gNDWyN/8bCsphj6zioG9biSBhRcKlJUVjSe6wiPbEqZbk+LDjZervwawQCrjtBJW4KWHWAXEzj1MglJSpK/zZnOathJmE6z39U2BzQjY3IG/DRn6T235U8YAAAAASUVORK5CYII="><br/>
					<h4>Design</h4>
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6">
					<img class="icon icons8-Source-Code" width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEL0lEQVRoQ+2YPWzbVhDH/0e5ViEvHTIEWeIuhTtVXgo3S+1MhijKypCgW+0tU+MOTU15iDqYdNPF2bLF2Yp2sEOKQjY5QJBmi7d6a7IEHToUKCxUrsQrHmkair749ezWhrjyveP9737v7h0JF+ShC6IDYyH/t0yOMzLOyHEESnr9bkdxnzsbxRcygvKfoHWz+tNkq5X7g4m+sg11+9wKKa05i1D4CdqdS9b9pb/OrxC9tg3CZcsoLsoQIWycOVoBVq5Cd2sb6sNzKyTAqv0PXa3/oP5+boVouvOQiKdlYhULrXK18UGndbjTIfq6bqj7SSIpsPq7NfWGFXw3Cqvimj1PRPcy2akbu9WFP6N8K/IZ0SrOLoB8ZjKXj2q81wGBFRPqnTaujMLKC9pRUwSrYRvqijQhpYqzBcZymzCfNBvCGQ8rIG+Z6lyYc4WKk59g7IGwbRnqatj60IxoFWeZgEeu6y7UNrW9MIPD3zNpev0twN/bZnErih2BmKIoDQZWwhrnSCFxDIU5pq3X5+DyizCseu1EDeRQIV5qwQ2AHkdJbZiQYzznomDVd7YE2uAv26CFYWgPFCIOm9tqvgL4mWUWl8OcDH8fYIUHtqluhq/vXyGKDTE+UbK52UHFpk+IJ+Ko2WBmymSn5pNWqG5XBFbE/Auz+7FtagdJhByX/z0iYstQZ3tt9AkpiXsQqKxkc9MyRHjVqlLbBGPRNov5JCKCPcekvGbCTm9ZfkdIqeJUwVhNW2YHMH7AjO2kWHXb6yrLW5ahVoN3J0KC6sBMN2yzIJqflMcvGniVBqu+SqbXy0S8012WPSEnH4tQr+OqE1gRqGwZ6kzcvaPWB4FvA7Oikp26kFLFEYf7x24MZAgaKMQ/kH4Hl4mWptszRMqvMrHyfB2GVhAh77CD74xqPHGi6dvDFzKx6mrUDwYe9hMx/hi6pExOfZi2/AqsGLxrG8W1OAEYttbvcYe/gfGkt1EP7OyaXtsXjUeZzC0kFXOCFdFn9kbhZVoh3Y16UD8aekWJOw/0l0hnjYAVyyzMAMRphXjzEPP0sNvG6EtjjHmgrwnqzksm3pOBVZR56FSu8QXd+SgDHECha2mxSn2NDyIc1dA7l0TdEYf7jm0WrqTBKs48FDohCge91IbMA91CSgIrYN821dtJz0bceSiSEE+Mfyv+fNg8EDhc+Ma5nJnAW2b3etLROMk8FFmIPw80dzuE1VE/IDS9tgrQt2mw8n8HKdVMNleOWv4jC4mKiAyson6re51UIQFWxChYm+rTJA4l3SNVSHHduU0u7r2fPbz6c/XWUVKnkuyTKqRUqT1lptdpqlUSEWKPNCECq4n3+A1cWjprrKQKEVgpLt/PZpuXzhorqULU9do1xcWnUX+HJkVo2D5paMl2LK69sZC4ETvt9eOMnHaE49q/MBn5F/XtRFGQSNloAAAAAElFTkSuQmCC"><br/>
					<h4>Entwicklung</h4>
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
				</div>	

				<div class="col-md-6">
					<img class="icon icons8-Paper-Plane" width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADjUlEQVRoQ+2ZTUwTQRiGv2nBrda/CEgwBhQRIRUx/hRPtpFwg6MnNHiAkJiYoJ6N1ZsnxQtHDxovehK42EOhHkQIGtGgVgkgBASCsUEMFNg135pt1u3+zOxsC03aS5PtdOd553u/d6ZbAln+IlnODzkBm13BXAVyFbBYgftDa0FR3Gi+Wedp0xu6ZS30cHAtIMJGCIAERYC7N/zC7awQoAZXgN0uqL52Rvi8pQVowSdn4lB2YA8yf+nwC1VGTtt0C2nBV1bXYSS2AP6aEplZkuDO9TohtOUE6FllbnEZosNT0BSoAI+QJzOb2Qc/z3gF9MAR5H1sXl75iw3HkvBW9smoACNwhHj5elyGv9zog+ICb9ItVvbJiAAzcPT7s3AM5hZ/p8DT2CetAszAcWL0e3f/mPzeGDgCtZX7tX1qmj7KYMd7wApczsXxn9AdHYPVxLoRvGX6OC6ABhwnxZR59XZanv/E0SJoClboJqRV+jgmgBYc/R4emISR2LwlPE36cAugBceJfi2twHO5WZfleYv37YBLjT51XP5XBZr0sS2ABRwnwSMBJg36nQaeNn2YBbCC4wSDH2YhPDCRXF1hm1s3LjVNQJU+1ALsgOPNu/u+wcjXBVZ46vSxFGAXHJv1Se9o0u/KRAZZn5JAtOljKaDzTaJFBKmLENium3M6F7FJH/eMJv3OCs+SPpYCcEDn0OpxUYKnBKDGSgQexnr6x1KGmWW9djBL+lAJwEGPxiVPfCHRBQBXjETgYWzo4w8ueNb0oRagDNSzlHIY+z4bT4G3ynqdxWBKH2YBWkuh3zHf40srTsAzp48tAYqlwpHJ3ujw9AVlc1IroMx67vSxLQC/WNgaCRJCIloKu/B20odLAH65qK1P0gqgzXon0odbQGFbpI8ACdjIesfsgzey/YOmsDUSIoTIT8skCab8DWcP1h/KAzdhvqet9OGvgKoPiNcb9VZWnT+8lzxoqsivp9n4FAA7m5e6hLYroO4DT7Xvk9vjeTdxdVczzcanBmA9+2j9xyVA7gPiKvHWnhITeTtPz7STP2Ybn1Obl2MVwD7ILyg6J5SXdky07055+Gp1luK1D1cT/7NQ5KSrtKx07lb5C53VlS+ZWYrXPtwCjKD1ruucpbjShzuFWOCTfaE6njthn4xWQBGhWMrtgntGf1qwLA5XCrFMlK6xOQHpWlna++YqQLtS6RqX9RX4C6oUwkAbcv6jAAAAAElFTkSuQmCC"><br/>
					<h4>Hositng</h4>
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
				</div>
  			</div> 
        </div>
    </div>
    
    <div class="col-md-6 dark col">
		<h1 class="text-center">Contact us Today</h1>
			<form>
				<div class="form-group">
					<input type="text" name="name" id="name" class="form-control" placeholder="Vorname"/>
				</div>
				
				<div class="form-group">
					<input type="email" name="email" id="email" class="form-control" placeholder="Email"/>
				</div>
				
				<div class="form-group">
					<label for="messge">MESSAGE</label>
					<textarea class="form-control" rows="7"></textarea>
				</div>
				
				<button class="button center-block" type="submit" style="background: transparent;">Send MEssage</button> 
			</form>
		</div>
	</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你声明了一个名为&#34; container&#34;的类。 &#34; row&#34;在一个类属性中,其顺序不正确。将它们用作嵌套容器&gt;行。示例

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>